Adds an icon to a page.
How do I add this widget to a page?
- Click Edit Page
- Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert before or Insert after
- Choose the Icon widget
- Select the Icon, you would like to use from the Icon Manager.
- Enter the link that you would like to link to for the icon.
- 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
- 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. It helps assistive technology understand how the icon should be used (e.g. Visit our Facebook Page).
- When you are finished, click on the green Create button and your Icon widget will show up on the page.
- Make sure to click either the Publish or the Save Draft option 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.