Skip to main content

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,535 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/all.min.css">
Copy

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

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