Font Awesome 5

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>`

                      
                        <span class="fab fa-android text-primary"></span>
                        <span class="fas fa-car text-secondary"></span>
                        <span class="fas fa-chart-pie text-success"></span>
                        <span class="far fa-clock text-danger"></span>
                        <span class="fas fa-comment-alt text-info text-warning"></span>
                        <span class="fas fa-flag text-dark"></span>

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.

Result
HTML

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