gi8ri7
Basic Use
  1. <i class="fas fa-stroopwafel"></i>
  2. <span class="fas fa-stroopwafel"></span>


Sizing Icons

  1. <i class="fas fa-stroopwafel fa-xs"></i>
  2. <i class="fas fa-stroopwafel fa-sm"></i>
  3. <i class="fas fa-stroopwafel fa-lg"></i>
  4. <i class="fas fa-stroopwafel fa-2x"></i>
  5. <i class="fas fa-stroopwafel fa-3x"></i>
  6. <i class="fas fa-stroopwafel fa-5x"></i>
  7. <i class="fas fa-stroopwafel fa-7x"></i>
  8. <i class="fas fa-stroopwafel fa-10x"></i>


Fixed Width Icons

  1. <div style="font-size: 2rem;">
  2. <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
  3. <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
  4. <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
  5. <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
  6. <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
  7. </div>


List Icons

  1. <ul class="fa-ul">
  2. <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>
  3. <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  4. <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  5. <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
  6. </ul>


Rotate & Flip

  1. <div class="fa-4x">
  2. <i class="fab fa-font-awesome"></i>
  3. <i class="fab fa-font-awesome fa-rotate-90"></i>
  4. <i class="fab fa-font-awesome fa-rotate-180"></i>
  5. <i class="fab fa-font-awesome fa-rotate-270"></i>
  6. <i class="fab fa-font-awesome fa-flip-horizontal"></i>
  7. <i class="fab fa-font-awesome fa-flip-vertical"></i>
  8. </div>


Animating Icons

  1. <div class="fa-3x">
  2. <i class="fas fa-spinner fa-spin"></i>
  3. <i class="fas fa-circle-notch fa-spin"></i>
  4. <i class="fas fa-sync fa-spin"></i>
  5. <i class="fas fa-cog fa-spin"></i>
  6. <i class="fas fa-spinner fa-pulse"></i>
  7. <i class="fas fa-stroopwafel fa-spin"></i>
  8. </div>


Bordered + Pulled Icons

  1. <i class="fas fa-quote-left fa-2x fa-pull-left"></i>
  2. Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  3. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  4. And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.


Stacked Icons

  1. <span class="fa-stack fa-2x">
  2. <i class="fas fa-square fa-stack-2x"></i>
  3. <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  4. </span>
  5. <span class="fa-stack fa-2x">
  6. <i class="fas fa-circle fa-stack-2x"></i>
  7. <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  8. </span>
  9. <span class="fa-stack fa-2x">
  10. <i class="fas fa-square fa-stack-2x"></i>
  11. <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  12. </span>
  13. <span class="fa-stack fa-4x">
  14. <i class="fas fa-square fa-stack-2x"></i>
  15. <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  16. </span>
  17. <span class="fa-stack fa-2x">
  18. <i class="fas fa-camera fa-stack-1x"></i>
  19. <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
  20. </span>