Add an icon to a page that can be linked to other pages, documents, or external websites.
How do I add this widget to a page?
- Click Edit Page
- Click either + Content or the Settings icon (down-facing caret), which is to the right of Edit, where you will need to select either Insert above or Insert below.
- 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 changing the target to New Window if the link is to a document or an external website.
- Additional fields, found in the Settings tab, allow you to customize what information the widget displays. The fields and their descriptions are listed below;
- Shape - Choose the form 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 - This lets you pick the icon's color 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 - This allows you to pick the icon's alignment 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 - This does not display but should be used for ADA compliance. It helps assistive technology understand what the icon does (e.g., Visit our Facebook Page).
- When done, 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 visually impaired site visitors can more easily use your website.
