Icon Group

Allows you to add a group of icons to a page that can be linked to other pages, documents, or external websites.

Typically, the theme designer uses this widget to add a row of icons at the top of your site to social media sites or other special tools you wish to make available.

While there is no limit on the number of icons you can have in an Icon Group widget, we recommend a maximum of seven icons if you are listing the icons horizontally on a page. Please remember to update the Custom Class Name field, located under the Container tab, with the following code: featured-links featured-links-6. Update the number at the end with the number of icons (listed at the end of the code) displayed horizontally. 

How do I add this widget to a page?

1. Click Edit Page
2. 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.
3. Select the Icon Group widget.
4. Click on the green + Icon button in the upper-right hand corner and choose the icon you would like to use from a list of available icons. Additional fields that need to be filled out include;
   
   • Link - Select a page or file you would like to link to or enter the URL for an external link.
   • Target - Select the target from either the current or new window. We recommend that any files or external links be opened in a new window.

   • 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 how the icon should be used (e.g., Visit our Facebook Page).
5. Repeat the previous step until you have completed building your icon group.
6. Additional fields can be found in the Settings tab. Changing these is optional and not necessary for the function of the widget, but they will allow you to customize the widget further to your liking. The fields and their descriptions are listed below;
   
   • Format - Select the format of the icon group, either Inline (horizontal) or Stacked (vertical). If Stacked is selected, all other settings are ignored.
   • 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 - Let's 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 Default, White, Primary, Secondary, Tertiary, Accent, Gray, Dark. and Social Brand. *
   • Border - 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
7. When done, click on the green Create button, and your Icon Group widget will show up on the page.
8. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.