Icons

[   User Guide Navigation]

Formatting Text & Media Icons

Several sidebar tools (Text, Link Grids, Links, etc.) include an option to add an appropriate icon to accompany the text. The Icons tool in the sidebar allows you to insert an icon anywhere on the page as well as to style the inserted icon with borders and colors.

 Tips for Icons

  • Do not use icons as a replacement for meaningful text. Icons are purely decorative and are not read by screen readers.
    • If you would like an icon to be viewable by a screen reader, you will need to take additional steps.  To learn more about icon accessibility, visit Font Awesome: Accessibility
  • When re-using icons, consistency is important as it helps establish content predictability for the user.

Instructions

Add an icon

  1. Place your cursor in the editor where you want the icon to go.
  2. Open the Add New Elements ( ) tab in the sidebar.
  3. Select the  Icon t ool. The Edit Current Element  ( ) tab opens with the Icon tool selected as the active tool. 

  4. Under the Content panel, choose an icon category  or  search for an icon using keywords to view icons for a specific topic or purpose. (You can also select All Icons from the dropdown menu.)
  5. Click on your preferred icon to insert it at the current cursor location.
  6. Use the options in the Style panel to control the appearance of the icon.
    Icon Tool: Style Panel

    1. Size: Set the Size as default ( ), Small, Medium, or Large.
    2. Style: To add a border Style, select square ( ), rounded corners ( ), circle ( ), or underlined ( ). Note: The border style will not display until you set the Border Width.
    3. Border Width: Set the border width to default ( ) with no border, Small, Medium, or Large.
    4. Colors: Use the color options to set the Icon Color, Background Color, and Border Color.

Edit an icon

  1. Select the Edit Current Element  ( ) tab in the sidebar.
  2. Locate the icon you want to modify and click to select it.
  3. Choose Icon  as the active tool:
  4. Use the options available in the Content and Style panels to make the desired changes.

Learn More