Font Aweosme

Over 1,500 free icons.

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                  
                    <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.css">

Set variable $font-icons

                  
                    $font-icons: "Font Awesome 5";

You need to know two bits of information to reference an icon:

  • Its name, prefixed with fa-
  • The style you want to use's corresponding prefix.
                  
                    <i class="fa fa-user"></i>

There are 4 styles: Solid, Regular, Light and Brands:

Style Availability Style Prefix Example Rendering
Solid Free fas <i class="fas fa-image"></i>
Regular Free far <i class="far fa-image"></i>
Light Pro Required fal <i class="fal fa-image"></i> N/A
Brands Free fab <i class="fab fa-font-awesome"></i>
Duotone Pro Required fad <i class="fad fa-camera"></i> N/A

Examples 

                        
                          <i class="fab fa-android text-primary"></i>
                          <i class="fas fa-car text-secondary"></i>
                          <i class="fas fa-user text-success"></i>
                          <i class="far fa-clock text-danger"></i>
                          <i class="fas fa-home text-info text-warning"></i>
                          <i class="fas fa-flag text-dark"></i>

Sizes

Need larger or smaller icons? Add .fa-xs, .fa-sm, .fa-lg, .fa-2x, .fa-3x, .fa-5x, .fa-7x or .fa-10x for additional sizes.

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