Font Awesome Icons

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Overview

Front includes the world's most popular and easiest to use icon set – Font Awesome 5 – with over 1,340 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="../../assets/vendor/font-awesome/css/fontawesome-all.min.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.

            
              <span class="fas fa-stroopwafel"></span>
              <!--
                1) style prefix == fas
                2) icon name == stroopwafel
              -->

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

Examples

            
              <i class="fab fa-android text-primary"></i>
              <i class="fas fa-car text-secondary"></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-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>