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.

Usage

All of our themes support Font Awesome out-of-the-box, so you can start using the icons within page templates and article content straight away. 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 <span> tag.

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

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

Other elements, like the <i> element, however it’s important to note that Zendesk may strip them out unless you allow unsafe HTML in your articles.

Zendesk will ignore empty elements, so adding a space within the tag will ensure that it appears to end users.

You can easily change the size, color and position of the icons using our utilities. In the example below, the icon is made larger using a font size utility class and space is added to the right-hand side using a margin utility class.

<span class="fas fa-camera font-size-2xl mr-2"> </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