Skip to content

Icon Group

Resources

Overview

The Icon Group Module inserts a group of icons and uniformly spaces them. You can add a link to each icon and add adjust the spacing between them. An example of a icon group that you are probably familiar with are icons for social media. Unlike the Icon module, you can't add text, but you have the same style options for the icons, and you can style them either individually or as a group.

Add an Icon Group

  1. Select the page on which you wish to add an icon group.
  2. Click Page Editor in the header bar.
  3. Click the + sign in the header bar.
  4. From the Modules tab, drag and drop the Icon Group module in the desired location on your page.
  5. On the Icon tab, click Edit Icon link.
  6. On the Add Icon screen, click the Select Icon link and choose the desired icon.
  7. Enter the Link that you wish to access when the icon is clicked.
  8. Enter Screen Reader Text to assist those using a screen reader.
  9. On the Style tab you will be able to configure the following:
    • Color: The icon color
    • Hover Color: The color displayed when the mouse is hovered over the icon
    • Background Color: The icon background color
    • Background Hover Color: The color displayed in the background when the mouse is hovered over the icon
  10. Click Save.
  11. To add another Icon to the group, click Add Icon and repeat steps 6 - 10 above.
  12. Once you have selected all of your icons, you can further customize the look of your Icon Group on the Style tab. Here you can define the size of the icons, their alignment and color. NOTE: Color Settings on the Style tab will apply to all icons, but will not over-ride the style settings that you may have applied individually in step 9.
Scroll To Top