gi8ri7
Basic Use
Kod · CSS3 qator
<i class="fas fa-stroopwafel"></i>

<span class="fas fa-stroopwafel"></span>


Sizing Icons

Kod · CSS15 qator
<i class="fas fa-stroopwafel fa-xs"></i>

<i class="fas fa-stroopwafel fa-sm"></i>

<i class="fas fa-stroopwafel fa-lg"></i>

<i class="fas fa-stroopwafel fa-2x"></i>

<i class="fas fa-stroopwafel fa-3x"></i>

<i class="fas fa-stroopwafel fa-5x"></i>

<i class="fas fa-stroopwafel fa-7x"></i>

<i class="fas fa-stroopwafel fa-10x"></i>


Fixed Width Icons

Kod · CSS13 qator
<div style="font-size: 2rem;">

  <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>

  <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>

  <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>

  <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>

  <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>

</div>


List Icons

Kod · CSS11 qator
<ul class="fa-ul">

  <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>

  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>

  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>

  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>

</ul>


Rotate & Flip

Kod · CSS15 qator
<div class="fa-4x">

  <i class="fab fa-font-awesome"></i>

  <i class="fab fa-font-awesome fa-rotate-90"></i>

  <i class="fab fa-font-awesome fa-rotate-180"></i>

  <i class="fab fa-font-awesome fa-rotate-270"></i>

  <i class="fab fa-font-awesome fa-flip-horizontal"></i>

  <i class="fab fa-font-awesome fa-flip-vertical"></i>

</div>


Animating Icons

Kod · CSS15 qator
<div class="fa-3x">

  <i class="fas fa-spinner fa-spin"></i>

  <i class="fas fa-circle-notch fa-spin"></i>

  <i class="fas fa-sync fa-spin"></i>

  <i class="fas fa-cog fa-spin"></i>

  <i class="fas fa-spinner fa-pulse"></i>

  <i class="fas fa-stroopwafel fa-spin"></i>

</div>


Bordered + Pulled Icons

Kod · CSS7 qator
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

Gatsby believed in the green light, the orgastic future that year by year recedes before us.

It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...

And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.


Stacked Icons

Kod · CSS39 qator
<span class="fa-stack fa-2x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-circle fa-stack-2x"></i>

  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-4x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-camera fa-stack-1x"></i>

  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>

</span>