Font Awesome 5 icons

If you're seeing blank boxes where icons should appear, chances are there's a problem of which version of Font Awesome you're using. 

Font Awesome 5 is not compatible with Font Awesome 4. This means that you can't have both Font Awesome 5 and Font Awesome 4 icons enabled in Settings > Beaver Builder > Icons. It also means that any custom CSS you've created for Font Awesome 4 icons won't work with Font Awesome 5 icons, because they use different class names. Finally, there can be a conflict with other plugins that are using a version that's different from the one you have selected in your Beaver Builder settings.

Note: Regardless of which version is enabled in your settings, any modules that were created with Font Awesome 4 icons will continue to work until you edit the module and select an icon from the Font Awesome 5 set.

New installations of the Beaver Builder plugin have Font Awesome 5 enabled by default. For updates to existing Beaver Builder installations, you have to switch to Font Awesome 5 manually by going to Settings > Beaver Builder > Icons, clearing the Font Awesome 4 checkbox, and selecting any of the Font Awesome 5 checkboxes, described in the following section.

Font Awesome 5 settings

The Font Awesome 5 icon set is huge, so in Settings > Beaver Builder > Icons there are several choices for subsets of the Font Awesome 5, as shown in the following screenshot.

These choices match the choices available at the Font Awesome website. Each subset has a basic set for the free version and an extra set for the Pro version, except for the Light subset, which has Pro icons only. You must complete the procedure in the following section for the additional Pro icons to show up in each icon set.

Enable Font Awesome 5 Pro

Use the following procedure to register your site with the Font Awesome Pro CDN (Content Delivery Network). As an alternative, you can use IcoMoon or Fontello to create a web font from your Font Awesome Pro icons and upload that icon set to Beaver Builder. See the Related Articles for information about how to do that.

  1. Go to https://fontawesome.com/account/services and sign in.
  2. On the Services tab, add your site's URL as a Pro CDN domain.
  3. In your child theme's functions.php file, add the following filter:
    add_filter( 'fl_enable_fa5_pro', '__return_true' );

Note: If you register your service at the Font Awesome site and don't add the filter, or vice versa, neither the Pro nor the free icons will display. This is because the URLs for the free and Pro versions of the icons are different. For this reason, remember to change your site's Pro CDN registration if you migrate your site to another location, and remove the domain registration and the filter in your child theme if you stop subscribing to the Pro version.