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? ·

WPIcons Pro Changelog

2.0.3 - March 29th, 2020

  • Fix number format on output of icon count.
  • Remove rogue alert from modal popup.
  • Fix ‘View Shortcode’ background width.
  • Fix ‘View Shortcode’ .markup-container width back to 50%.
  • Remove reference to $ in all scripts.
  • Remove down arrow in icon browser titles.
  • Add period to ‘Select an animation to add to this icon’ sentence.
  • Update PHPCS standards to ignore shorthand syntax errors.
  • Add --ignore-externals flag to svn checkout.
  • Add PHPUnit testsuite name.
  • Add minimum PHP version/WP Version to plugin header.
  • Update unit tests with new plugin header info.

  • 2.0.2 - August 20th, 2019

  • Fix remote updater not passing license key, causing updates to not work.
  • Fix .zip archives generated during the build.
  • Update remote plugin updater class.

  • 2.0.1 - August 14th, 2019

  • Clean up minor bugs in the Icon Browser/Icon Builder windows.
  • Confirm working with Beaver Builder.
  • Tweak conditional login in Icon Builder windows for easier reading.

  • 2.0.0 - March 1st, 2019

  • Initial release of WPIcons Pro v2.0.0.
  • Complete rewrite of WP SVG Icons Pro.
  • Rebranded to WPIcons Pro.
  • Tons of new features, performance improvements and improvements (See https://www.wpicons.com/features for full feature list)
  • Version v2.0.3 Released

    Released: Yesterday at 3:04 pm EST

    View Changes