Adds an icon to a page.


How do I add this widget to a page?

  1. Click Edit Page
  2. Click the Edit Content icon (pencil) and select either Insert before or Insert after
  3. Choose the Icon widget
  4. Select the Icon, you would like to use from the Icon Manager.
  5. Enter the link that you would like to link to for the icon.
  6. Select the target. We recommend if the link is going to a document or an external website that the target be changed to New Window
  7. Additional fields can be found in the Settings tab, these will allow you to customize what information the widget displays. The fields and their descriptions are listed below;
    • Shape - Choose the shape of the active area of the icon. The options available are Default, Square, Rounded and Round.
    • Size - Select the size of the icon. The sizes available are small, medium, large, x-large and xx-large.
    • Color - Lets you pick the color of the icon from the following options; Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand. *
    • Background Color -  Select the background color from the following; Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand. *
    • Border Color -  A colored border can be placed around the icon if needed. The color choices are Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark and Social Brand. *
    • Alignment - Allows you to pick the alignment of the icon from left, center and right. By default the alignment is left
    • Display Text - Text that you would like listed near the icon.
    • Alternative Title/Label - Does not display but should be used for ADA compliance. Helps assistive technology understand how the icon should be used (e.g. Visit our Facebook Page).
  8. When you are finished, click on the green Create button and your Icon widget will show up on the page.
  9. Make sure to click the Save --> Publish options just as you would when you're editing pages.


* Keep ADA compliance in mind when choosing colors. All text should have a stark contrast over background colors so that visually impaired site visitors can more easily use your website.