Loading...

Font Awesome 5 Integration

Use Font Awesome to enhance user experience.

SVG + JS

Inlcuded

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

Usage

<div style="font-size:3em; color:Tomato">
  <i class="fas fa-camera-retro"></i>
</div>

Sizing

<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>

Overlay

<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:white">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope" style="color:#ffab00"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>
    1,419

Transforms

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:#80cbc4"></i>
  <i class="fas fa-magic" style="background:#80cbc4"></i>
  <i class="fas fa-magic" data-fa-transform="grow-6" style="background:#64b5f6;color:gold"></i>
</div>

Social Media

<div class="fa-4x">
<i class="fab fa-twitter"></i>
<i class="fab fa-twitter" style="color:#00aced"></i>
<i class="fab fa-twitter" style="background:#00aced;color:white"></i>
<i class="fab fa-twitter" data-fa-transform="flip-h" style="color:#00aced"></i> 
</div>