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
<i>
and- Add the
aria-label
with the appropriate alternative text. - Add
role="img"
to let the screen reader know that there's an icon. - Optionally add
title="Spotify"
this will display the title when hovering with a mouse.
- Add the
For example:
<i class="fab fa-spotify" role="img" aria-label="Spotify" title="Spotify"></i>
Here's the HTML for the following situations:
Decorative icon
If it is not meaningful, it should be completely hidden with aria-hidden="true"
<i aria-hidden="true" class="fa-dog"></i>
Informative icon
When using an informative icon, use role="img"
and an aria-label
:
<i class="fa-dog" role="img" aria-label="alternative text goes here"></i>
Informative icon with a link
When linking an icon, wrap the <a>
around an informative icon:
<a href="#"><i class="fa-dog" role="img" aria-label="alternative text goes here"></i></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 <span>
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:
<span aria-hidden="true">✅</span><span class="sr-only">Done</span>
Done
Done
♿ Accessibility for linked unicode icons
For using unicode icons within a link, you can hide the icon with <span>
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="#">
<span aria-hidden="true">✅</span>
<span class="sr-only">Done</span>
</a>
If you don't include the alternative text in the <span>
, in this case, the text "Done":
- Editoria11y will report: Link with no accessible text
- Siteimprove will report: Hidden element has focusable content
Related Topic

Working with the Text Editor
Learn about the most flexible tool you have with the Text Area Paragraph.
Text Editing Toolbar
Learn more about the text editing toolbar