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.

Add Font Awesome 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. Click the green checkmark to accept your selection.
5. 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.

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

  Accessibility for icons

When first placed in the text area, icons have no semantic meaning, and provide no information for screen readers or other accessibility technology. Basically, these icons don't exist for these visitors. To make your icons available to all visitors, you can describe the icon in adjacent text or through the HTML.  

Use a Font Awesome icon with text

If your icons have semantic meaning, include this information in the text near the icon. 

For example: 

 Accessibility

Use a Font Awesome icon with no text

You may want to display an icon on its own. To make it accessible, you must provide alternative text in the HTML for the icon. For this, you can add both a aria-label and role attribute. A title attribute is optional. 

Note: It's preferred to use visible text to make the meaning of the icon clear to all users.

1. Edit the Text Area and click Source. Here's where you can learn how to edit the HTML source code.
2. Find the <i> and
   1. Add the aria-label with the appropriate alternative text.
   2. Add role="img" to let the screen reader know that there's an icon.
   3. Optionally add title="Spotify" this will display the title when hovering with a mouse.

For example:

 <i class="fab fa-spotify" role="img" aria-label="Spotify" title="Spotify"></i>

Learn more about accessibility for Font Awesome icons

For other approaches to using icons accessibly, see Font Awesome Icons and Accessibility.

Unicode icons

It is possible to use unicode characters as icons. The easiest way to insert a unicode character is to copy it from say, a Google Doc, and past it into your content.

♿ Accessibility for unicode icons

When using a unicode character icon, the native meaning may not make sense. To keep the character from getting announced, it needs to be hidden and, if necessary, given appropriate alternative text. To do this, use <span> around the unicode character and alternative text. To hide the icon, use aria-hidden="true". To provide alternative text, use class="sr-only".

For example:

<span aria-hidden="true">✅</span><span class="sr-only">Done</span>

✅Done