Add Icons in a Text Area

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 6 icons in the Text Area Paragraph. Font Awesome's free version 5 icons will also work.

Add Font Awesome icons in a Text Area

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

Click on the Icons button
Search for the icon you want
Select the icon you wish to use
Click the green checkmark to accept your selection.
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.

Considerations

Icons are more like text than they are an image:

Icons placed inside a header (h2, h3, etc) will match the font size of the header.
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.

Edit the Text Area and click Source. Here's where you can learn how to edit the HTML source code.
Find the  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:

Here's the HTML for the following situations:

Decorative icon

If it is not meaningful, it should be completely hidden with aria-hidden="true"

Informative icon

When using an informative icon, use role="img" and an aria-label:

Informative icon with a link

When linking an icon, wrap the <a> around an informative icon:

<a href="#"></a>

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. When using a unicode icon, the native meaning may not make sense. To keep the symbol from getting announced, it needs to be hidden from screen readers and, if necessary, given appropriate alternative text.

Descriptions of unicode symbols

Screen readers will announce descriptions of unicode symbols icons. Here's more on what is announced:

Accessibility for unicode icons

For using unicode icons in plain text, you can hide the icon with  around the unicode symbol and add hidden alternative text. To hide the icon, use aria-hidden="true". To provide alternative text, use class="sr-only".

For example:

✅Done

Done

♿ Accessibility for linked unicode icons

For using unicode icons within a link, you can hide the icon with  around the unicode symbol, but add the alternative text to the link. To hide the icon, use aria-hidden="true". To provide alternative text, use class="sr-only".

<a href="#">

✅

Done

</a>

Done

If you don't include the alternative text in the , in this case, the text "Done":

Editoria11y will report: Link with no accessible text
Siteimprove will report: Hidden element has focusable content

Add Icons in a Text Area

Add Font Awesome icons in a Text Area

Considerations