Icon and Icon Group modules overview
- To make icons available for selection in Beaver Builder modules that allow them, they have to be enabled in Settings > Beaver Builder > Icons. See the Related Articles below for information about how to enable or disable the standard icon sets in Beaver Builder and how to add custom icon sets. If you use Font Awesome 5 Pro, you can connect to the Font Awesome 5 CDN to enable them or upload a local icon set.
- Beaver 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.
- Font Awesome 5 icons are not compatible Font Awesome 4. If you have an older site that still has Font Awesome 4 icons in existing layouts, Beaver Builder loads a shim automatically to convert those icons to Font Awesome 5.
- If you use Beaver Builder Theme, you have the option to force Font Awesome 5 icons to load on every page, whether or not they appear in Beaver Builder Theme or page layouts. This setting is useful if you have third-party plugins that use Font Awesome 5 icons. See the article on the Font Awesome settings in Beaver Builder Theme.
The Icon Module lets you insert icons from Font Awesome, Foundation, or WordPress into your layouts.
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 can also contain a link to the following content that will result in smooth scrolling to the next section if clicked. See the Related Articles below for how to implement smooth scrolling.
You can 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.
The Icon Group Module inserts 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 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.
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.
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.