Add Icons to Text

Using symbols such as icons to augment the text on your website can improve comprehension and clarify your message.

You can add icons from Font Awesome's free version 5 icons in the Text Area Paragraph.

  Accessibility

If your icons have semantic meaning, include this information in the text near the icon. Learn more about Font Awesome Icons and Accessibility.

Add icons in a Text Area

The text editor has an Icons button right next to the Media button.

1. Click on the Icons button
2. Search for the icon you want
3. Select the icon you wish to use
4. For some icons you will be able to choose between different versions (outline, solid, etc) from the drop-down in the lower right of the drop-down.
5. Click the green checkmark to accept your selection.

Icons behave a bit like text. An icon in a header, for example, adjusts size to match the font size. Linked icons take on the same link color and hover state as the text.

Create a linked icon with no text

You may want to display an icon on its own for a link. To make it accessible, however, you must include a label for non-visual visitors. In this case, you need to add a text link, just as you would do if you planned to display it. You can use the CSS class sr-only to hide the text for visual visitors. 

Note: We do still recommend that you use visible text to make the meaning of the icon clear to all users, since there are always site visitors who may be unfamiliar with the icon.

1. Edit the page and click Source. 

2. Add the CSS class sr-only to a <span> around the text you want to hide. For example:

   <a href="https://open.spotify.com/">   <i class="fa fa-brands fa-spotify">    <span class="sr-only">Spotify</span>   </i> </a>

An example: