Font Awesome

Get vector icons and social logos on your website with Font Awesome.

Overview

Front includes the world's most popular and easiest to use icon set - Font Awesome - with over 1,380 free icons.

How to use

Place this code, which contains everything you need, within the <head> of each template or page that you want to use Font Awesome on.

              
              <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.css">

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="fas fa-stroopwafel"></i>
                <!--
                  1) style prefix == fas
                  2) icon name == stroopwafel
                -->

Examples 

                    
                      <i class="fab fa-android text-primary"></i>
                      <i class="fas fa-car text-body"></i>
                      <i class="fas fa-chart-pie text-success"></i>
                      <i class="far fa-clock text-danger"></i>
                      <i class="fas fa-comment-alt 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-1x, .fa-2x, .fa-3x, .fa-4x, .fa-5x, .fa-6x, .fa-7x, .fa-8x, .fa-9x or .fa-10x for additional sizes.

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