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:

WPIcons - Icon Builder Window

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.

WPIcons Icon Builder - View Shortcode Button

WPIcons - Icon Builder Shortcode View

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.

WPIcons Shortcode in Beaver Builder text module

Beaver Builder with WPIcons Icon Rendered

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.

Was this article helpful? ·


Warning: array_rand(): Array is empty in /home/runcloud/webapps/wp-svg-icons/wp-content/mu-plugins/fomo/fomo.php on line 109

Notice: Undefined index: in /home/runcloud/webapps/wp-svg-icons/wp-content/mu-plugins/fomo/fomo.php on line 109
WPIcons Pro - Plus License
Code Parrots