Troubleshooting Font Awesome icons

Font Awesome 5 (FA5) is not compatible with Font Awesome 4 (FA4), and this has caused various problems with the display of Font Awesome icons within and across WordPress plugins. The main indicator of icon trouble is seeing a blank box instead of the icon itself, but there can be other problems that arise from the fact that the CSS classes have changed for FA5 icons. We can't recommend a fix that works in all cases, but here are some things you can try.

1 Try changing Beaver Builder plugin and theme settings

Both the Beaver Builder plugin and theme have changed across several versions to smoothly transition to FA5, and there are some settings that may solve the problem, but the settings are a bit different depending on which versions of the Beaver Builder plugin and theme you're using. If you're using a different theme or these Beaver Builder Theme settings don't solve the problem, there are a few other troubleshooting solutions you can try, described in Sections 2 and 3.

Beaver Builder 2.2.2 and later

As of Beaver Builder 2.2.2, only the FA5 icon set is loaded for content layouts. If you have FA4 icons in your existing content layouts, a shim loads to automatically convert those icons to FA5. If you have custom CSS rules for FA4 icons, you will need to update them, because the FA5 classes have different names. See Section 3 of this article.

Beaver Builder Theme relies on the Beaver Builder plugin to load the icon sets that apply to the areas of the page controlled by the theme, so the icon set is only loaded a maximum of one time for a page.

If you're using non-Beaver Builder plugins that use Font Awesome icons, such as a mega menu, there's a setting in the Beaver Builder Theme at Customize > General > Layout > Font Awesome icons that can force icons to load on every page. Changing this setting may solve the problem if you are seeing blank boxes instead of icons.

As of Beaver Builder Theme 1.7.2, you have the following three choices for this setting:

  • None (Default)
    This is the "automatic" setting. Font Awesome 5 or the Font Awesome 4 shim is loaded only on pages in which icons are detected by the Beaver Builder Plugin or Theme.
  • Font Awesome 4 shim
    The Font Awesome 4 shim is loaded on every page and converts FA4 icons to FA5.
  • Font Awesome 5
    The FA5 icon set is loaded on every page.

Prior to Beaver Builder Theme 1.7.2, the second option loads the Font Awesome 4 icon set on every page instead of the Font Awesome 4 shim. This was the default setting, and it doesn't change when you upgrade to Beaver Builder 2.2.2, so you'll have to change the setting manually if you want to switch to the current default setting of None.

Prior to Beaver Builder 2.2.2

In Settings > Beaver Builder > Icons, you had to choose either the Font Awesome 4 or the Font Awesome 5 icon set, not both, because of their mutual incompatibility. Any custom CSS you created for FA4 icons won't work with FA5 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. See the following sections for more information about trouibleshooting.

Note: Regardless of which version is enabled in your settings, any Beaver Builder 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.

2 Possible conflicts from other plugins or themes

We've seen an issue where the way another plugin handles assigning font weight to icons has caused a problem with FA5. The free version of FA5 requires a font weight of 900. If you're seeing blank boxes and other solutions haven't worked, you could try adding this custom rule. See the Related Article for information about where to add custom CSS.

.fas { font-weight:900 !important; }

The .fas class is used for FA5 Solid icons.

If this rule doesn't work, try going through the routine of deactivating plugins or changing themes to see if your problem is resolved. See the Related Article below for that troubleshooting procedure.

3 Other FA5 troubleshooting tips

If you added your own HTML for Font Awesome icons or developed custom CSS rules for FA4, you will probably need to update them. The free set of FA5 Solid icons use the .fas class and require a font weight of 900. Here's some basic information about built-in classes in FA5 and examples of CSS rules for other modifications, and here's some basic FA5 troubleshooting information.

Some ad blocker browser extensions will block certain icon fonts from loading. If you're using an ad blocker, try whitelisting the site.