How do I use WPIcons with Beaver Builder?
WPIcons is fully compatible with the page builder Beaver Builder. While we do not have a dedicated module for use in Beaver Builder, you can easily use the generated shortcodes to add default, custom or SVG icons to your pages. Follow along below for instructions.
Initial Setup
When using WPIcons alongside Beaver Builder, you can quickly and easily generate shortcodes to display icons, or you can generate full HTML markup to add to your page templates/html files. The first thing you’ll want to do is create a new page. We’re not actually going to add any content to this page, just use the icon browser/builder to generate icon shortcodes to use inside of Beaver Builder.
In a second tab in your browser, open up the page/post you want to add icons to and head into the Beaver Builder editor.
You should now have two tabs open, one with a new/empty page and a second with the page open you want to add icons to.
Generating Icon Shortcodes
In the first tab, you’ll want to click on the ‘Add Icon‘ button that’s directly to the right of the ‘Add Media‘ button. This will bring up the WPIcons Icon Browser/Icon Builder window.
You can then select the icon set you want from the left hand column, and then choose an icon. This will bring up the ‘Icon Builder‘ populated with your selected icon. See the screenshot below for a reference:
Go ahead and customize the icon to your needs, and click on the blue ‘View Shortcode‘ button in the bottom right hand corner of the Icon Builder window. This will bring up a new window with two sections. The first contains the shortcode needed to generate the icon you’ve customized. The second, is the HTML markup generated from the shortcode. You can use this HTML markup directly in your templates or in the PHP files of your theme.
Copy the Shortcode
Copy the shortcode to your clipboard and navigate over to the second tab with Beaver Builder opened. You can then add a Text Editor module from Beaver Builder onto the page and paste the shortcode into that field.
And there you have it – a quick and easy method for adding icons onto your page through Beaver Builder.
Additional Thoughts
While we know this is an extra step needed to add icons into Beaver Builder, we are currently looking at building out a custom Beaver Builder module that would allow adding icons into your pages a bit more seamless. At this time, we currently fully support the WordPress core block editor and are working on supporting other page builders.