How to add and use icons

Content editors can display several icons within the rich-text editor.


Using icons with the HTML class attribute

The rich-text editor allows for directly editing the HTML source code. To make use of the SVG icons included in the “Forty Acres” theme, edit the HTML source code as demonstrated below.

Use the following classes to display the icon fonts


Class to use

Right angle icon


External link icon


Lock icon


To use the HTML class attribute to add an icon, see the code example below:

<a href="">Visit our secure website <em class="icon-lock">&nbsp;</em></a>

This code results in:

Image showing padlock icon


The &nbsp; (non-breaking space) inside the <em> tag is important, as empty HTML tags in the rich-text editor get stripped out and no icon will show.