Icon and Icon Group modules overview

Icon module

The Icon Module lets you insert icons from Font Awesome into your layouts. If your Blackbaud Consultant added a Custom Icon library to your site, you’ll see it here.

The Icon module comes with a text editor, where you can enter and format text that will appear to the right of the icon. You can add a link, which applies to both the icon and the text. If you add a background color, it appears as a circle around the icon, as in the following screenshot.

Another example is to use a large Arrow icon as a pointer to the content below the fold in a hero image. It alerts people to keep scrolling, but the icon can also contain a link to the following content that will result in smooth scrolling to the next section if clicked. See the Related Article for how to implement smooth scrolling.

Icon Group

The Icon Group Module inserts a group of icons and uniformly spaces them. You can add a link to each icon and adjust the spacing between them.

Unlike the Icon module, you can’t add text, but you have the same style options for the icons. These icons can be styled individually or as a group.

One good use for an Icon Group would be to display the icons for various credit cards. In this example, all of the icons were styled the same color. Another example is using the Icon Group to display social media icons with links.

Related layouts

There isn’t another module that’s similar to the Icon Group module, but another way to group icons in a layout would be to use several Icon modules in separate columns. Icons in separate columns in most cases will stack differently from an Icon Group, so you could see which method works best for you.