Adding Font Awesome icons

Font Awesome is a free icon set containing hundreds of icons that you can easily add to your help center. The icons can be combined with our color utilities and range of content elements to create beautiful and unique layouts, or within article content.

In this article

Installation

At the time of writing, the latest version of Font Awesome is 6.1.1, which you can add to your theme by copying-and-pasting the following line of code into your theme’s document_head.hbs template:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

We don’t include Font Awesome icons in our themes by default, as not every company has a need for them. Given the number of icon set options that exist, we prefer to give our customers the flexibility to choose.

Usage

Once you’ve added the reference to Font Awesome’s stylesheet to your theme, you can start using the icons within page templates and article content. For example, the class names .fas .fa-camera add a camera icon from the solid style collection of icons when applied to an HTML element like the <i> tag.

<!-- Using an <i> element to reference the icon -->
<i class="fas fa-camera"></i>

<!-- Using a <span> element to reference the icon -->
<span class="fas fa-camera"></span>

With the free version you have access to the solid and regular styles as well as brand icons.

<!-- Solid style -->
<i class="fas fa-user"></i>

<!-- Regular style -->
<i class="far fa-user"></i>

<!-- Brand icon-->
<i class="fab fa-github-square"></i>

Refer to the Font Awesome basic use guide for more detail about how to use the icons in your page templates and article content.

Questions or feedback about this article? Let us know