Enable, disable, or import new icon sets

Page Builder comes with three icon sets:

  • Font Awesome
  • Foundation Icons
  • WordPress icons

You can enable or disable any of these icon sets. You can disable or delete any custom icon sets that you upload. You can also create your own icon sets using either IcoMoon or Fontello and import them into Page Bulider. We'll cover each case.

Enable, disable, or delete icon sets

You can enable or disable the default icon sets. You can disable or delete custom icon sets that you added previously.

  1. On the WordPress admin panel, click Settings > Page Builder, then click the Icons tab.
  2. Select or clear checkboxes to enable or disable the icon sets. You can also delete any custom icon sets you have uploaded by going to Media Library and deleting the zip file.

Use a custom icon set

You can use the IcoMoon App to create and download a custom icon set as a web font, then upload it so Page Builder can use it Here are the instructions for each task.

Tip: If you use icons from different icon sets on the same page, creating a custom icon set with just those icons is a great way to reduce page load time. That way Page Builder only loads one icon set.

1

Create a custom icon set in the IcoMoon App

  1. Open the IcoMoon App.
  2. Select the icons you want in your set by clicking on them.
    You can select icons from paid or free libraries by clicking the Icon Library button in the top toolbar.
    If you have your own icons, you can upload them by clicking Import icons in the top toolbar.
  3. Once you have your set selected, click Generate font in the lower right corner, verify your font set, then click Preferences in the toolbar.
  4. Change Font name to something that will help you remember the set in Page Builder.
    This step is optional, but the default label is icomoon, so if you import more than one IcoMoon icon set, Page Builder will display the same label.
  5. Rename the Class prefix from icon- to anything else.
    Important: The Class Prefix setting is what helps identify your icons on the page when added to a Page Builder layout. If left unchanged, multiple icon fonts using the icon- prefix may conflict, causing some to display incorrectly or not display within Beaver Builder’s icon selector. 
  6. Open the CSS Selector section and choose either Use attribute selectors or Use a class.
    Don't choose to use the <i> tag, because it tends to override all other fonts' styling in Page Builder.
  7. Click X in the upper right corner to close the Preferences window.
  8. Click Download.
    The download file is a zip file prefixed with icomoon.
  9. Follow the instructions below to import your icon set into Page Builder.
2

Create a custom icon set with Fontello

  1. Go to the Fontello site.
  2. Select the icons you want in your set by clicking on them.
  3. Once you have your set selected, click Download font in the upper right corner.
    The download file is a zip file prefixed with  fontello.
  4. Follow the instructions below to import your icon set into Page Builder.
3

Import an IcoMoon or Fontello custom icon set into Page Builder

  1. On the WordPress admin panel, click Settings > Page Builder, then click Upload icon set.
  2. When the Media Library upload window opens select your zip file. After the icon set has uploaded, click Select file.