User Guide Navigation

Advanced Elements Insert/Style Icons

Many tools have icon support built in. This tool allows a user to add an icon into the rich content editor at the cursor position.

The Interface

icons tool interface

Turning on the Icons Tool

This is an Intermediate level Design Tool

To turn on this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Intermediate or Advanced from the Select a Comfort Level area
2. Manually turn on this tool by finding the Icons tool in the list and clicking the switch below the tool name
Close the Design Tools Settings

Instructions

Add an Icon at Cursor Position

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Icons.
Click Insert Icon at Cursor.
Place your cursor in the rich content editor where you want to place an icon.
Search for an Icon or choose an icon from one of the categories.
Click Save.

Change an Existing Icon

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Icons.
Click the button in the Icons in Content section that represents the icon you want to change.
Search for an Icon or choose an icon from one of the categories.
Click Save.

Style an Icon

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
Place your cursor at the icon you wish to style in the rich content editor.
1. Look for an i in the Apply To section of the Design Tools style tools
Make and desired style changes using the rich content editor toolbar or Design Tools.
Click Save.

Tip: If your are having a difficult time getting your cursor on the icon, you can hover over the button for that icon in the Icons tool to select it.

Tip: If your cursor is in an existing panel widget in the content editor, you can click the button in the jump menu to jump right to the Icon tool section.

Icon 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 about icon accessibility visit:
fontawesome.com/how-to-use/accessibility