How to add and use icons

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

Contents

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

Icon

Class to use

Right angle icon

icon-angle-right

External link icon

icon-external-link

Lock icon

icon-lock

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

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

This code results in:

Image showing padlock icon

Important

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.