844 Tall Grass Lane; Mundelein, IL 60060 847-510-5987 info@spritzweb.com

Facebook Linked In Twitter YouTube
Spritz Logo

Font Awesome


Step 1: Set up on Your Site

Copy this code into the <head> of each page where you want to use Font Awesome.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


Step 2: Add Icons to Your UI

Start placing icons in your HTML's <body>. The free icons are prefixed with fas.

<i class="fas fa-igloo"></i>

<i class="fas fa-check"></i>

<i class="fas fa-check-circle"></i>

<i class="fas fa-check-square"></i>

<i class="fas fa-angle-right"></i>

<i class="fas fa-angle-up"></i>

<i class="fas fa-arrow-alt-circle-right"></i>

<i class="fas fa-arrow-up"></i>


Step 3: Style Your Icons

Change size and color. Font Awesome icons automatically inherit CSS size and color, so they will blend in with text inline (ie, paragraph tabs, etc) wherever you put them. For different sizes and colors, just add the appropriate suffix.

Size

<i class="fas fa-envelope"></i>

<i class="fas fa-envelope fa-xs"></i>

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

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

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

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

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

Color

<i class="fas fa-angle-right"></i>

<span style="color: #fab005;"><i class="fas fa-angle-up"></i></span>

<i class="fas fa-phone"></i>

<span style="color: slateblue;"><i class="fas fa-phone-square"></i></span>

Rotate & Flip


Replace standard bullets in lists with icons

Use fa-ul and fa-li to replace default bullets in unordered lists.

  • List icons can
  • be used to
  • replace bullets
  • in lists
<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"></i></span>replace bullets</li>
   <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Downloadable Version

Can also serve Font Awesome yourself, without relying on the external FA server. The download package is in my Building Blocks folder. For more info, see https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself.