Tip: Page Builder loads the stylesheet and font files for every icon set you use on a page. For example, if you use one icon from Font Awesome and one icon from Foundation on your page, it has to load both icon sets. This adds load time to your page. If page load time is a concern, limit your icon to one set, or create a custom icon set using only the icons you need on the page. See the Related Articles for how to create and import a custom icon set.
Icon module
The Icon Module lets you insert icons from Font Awesome, Foundation, or WordPress into your layouts. See the Related Articles for information about how to add custom icon sets.
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, as shown in the following screenshot example. It alerts people to keep scrolling, but the icon also contains a link to the following content that will result in smooth scrolling to the next section if clicked. See the Related Articles for how to implement smooth scrolling.
Tip: You can also use single icons with heading text in the Callout module, where you have more control over whether the text appears to the left or right of the icon. You can add a link to the icon and heading on the Call to Action tab with Type = None.
Icon Group
The Icon Group Module allows you to insert a group of icons and uniformly space them. You can add a link to each icon and add adjust the spacing between them.
Unlike the Icon module, you cannot add text, but like the Icon module, you have the same style options for the icons, and you can style them either 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.
