Intermediate Training Icons

Icon Tool

We have added icons to content blocks, navigation items, and links but you can also add icons at the cursor position.

Icons can be added using the Jump to Icons panel button in the Jump menu.

Add an Icon

Try it!

Add a checkbox icon to the success alert box below:

Success:

You have successfully added an icon at the cursor position.

Change an Existing Icon

You can also use the Icons tool to change existing icons in your content.

Try it!

Change the icon for the Change an Existing Icon heading above.

Icon styling

When it comes to applying styling to icons, it can be a little tricky. Sometimes the rich content editor will allow you to select an image.

Try It!

Follow the instructions below to learn how to style icons

Content Block Icon

The way the styling for this theme works, you can select the content block icon in the rich content editor.

Other Icons

With other icons, we sometimes need another way to select the icon. For the time being, you can do this by hovering over the icon in the Icons tool.

Change the styling for this icon:

Hopefully, the future will bring a better way to access styling for other icons.

Icons and Accessibility

In the current implementation of icons in Design Tools, icons are purely decorative in nature and will be ignored by screen readers.

If you want an icon to be viewable by a screen reader, you will need to take additional steps.

To learn more visit: fontawesome.io/accessibility/

Up Next: Module List