Font Awesome 5 breaks backwards compatibility with Font Awesome 4 by changing both the prefixes and the names of certain icon classes.

UberMenu 3.4 updates to Font Awesome 5. Therefore customers who have previously set Font Awesome 4 icons will have saved classes that are no longer Font Awesome 5-compatible.

If you have never had an earlier version of UberMenu installed, or did not set icons prior to updating to UberMenu 3.4, you can disable the Dynamically Convert Font Awesome 4 Icons to Font Awesome 5 setting and ignore this document.

Please note this guide pertains only to icons set in the UberMenu “Icon” setting. If you have added icons via custom HTML within your UberMenu, you will need to update those classes manually.

Dynamic Icon Updating

When you first install UberMenu 3.4, you’ll automatically be updated to Font Awesome version 5. UberMenu will automatically dynamically convert all of your Font Awesome 4 icons to Font Awesome 5 when loaded. This means the update should be transparent and all icons should still work upon updating.

To disable the dynamic updating, either because you have converted all your classes permanently, or you wish to use the old classes, you can disable the Dynamically Convert Font Awesome 4 Icons to Font Awesome 5 setting in the UberMenu Control Panel > General Settings > Font Awesome.

Permanent Conversion

In order to permanently convert all Font Awesome 4 icon classes to Font Awesome 5, you can use the Font Awesome 4 to 5 Migration Tool.

Navigate to the UberMenu Control Panel > General Settings > Maintenance and click the Migrate Font Awesome 4 to 5 button

The migration tool will open and search your database for icons that need to be updated:

Click the blue button to complete the icon class migration. When finished, you’ll see a report of the updated icons.

If you have no icons to convert, you’ll receive the message “No icon conversions necessary”.

When all your icons are converted, you no longer need the Dynamically Convert Font Awesome 4 Icons to Font Awesome 5 setting, so that can be disabled.

Updating Custom CSS

If you have set custom icon styles in UberMenu or UberMenu – Icons Extension, you may need to re-save the settings in the Customizer to regenerate the new styles.

If you have written custom CSS for icons, those icons still have the same class, .ubermenu-icon. Your code should still apply, but may require tweaks in some cases. Tip: don’t use padding on SVG elements.

If you have written custom CSS for the submenu indicators, these have changed from pseudo-elements to normal icons (in order to support SVG). Therefore you’ll need to adjust any CSS from the :after pseudo-selector, to the .ubermenu-sub-indicator class.

Using in conjunction with Font Awesome 4

In most cases this won’t be an issue, but if your Font Awesome 5 assets load after your Font Awesome 4 assets, the Font Awesome 4 style properties may be overwritten, resulting in the Font Awesome 4 icon glyphs not displaying properly. Adding this CSS will restore the visibility of the Font Awesome 4 icons until you can update them to Font Awesome 5 classes:

i.fa{
  font:normal normal normal 14px/1 FontAwesome;
}

Other icons on your site

As Font Awesome 5 is adopted by more and more themes and plugins, there will inevitably be some growing pains, due to the backwards compatibility issues, and different components running different versions of Font Awesome.

A few tips:

1. If you are using SVG with JS, either via UberMenu or another component on your site, that javascript is going to replace all Font Awesome icons on your site with Font Awesome 5 SVGs. If you are running Font Awesome 4 icons, that may break things. If you need it, you can easily activate the Load Font Awesome 4 Shim setting to load the Font Awesome shim that auto-converts Font Awesome 4 icons to Font Awesome 5 via javascript.

2. If you have Font Awesome 4 icons on your site that are not displaying, adding this CSS will likely resolve it until you update them to Font Awesome 5.

i.fa{
  font:normal normal normal 14px/1 FontAwesome;
}

3. In the long run, you will want to convert your icons to Font Awesome 5. Not all plugins/themes may have an auto-convert utility.

4. Using the Font Icons option will provide the best compatibility. But if you’re running the SVG JS anywhere on your site, it’s going to change all Font Awesome icons to SVG regardless.

5. If you want to maintain your UberMenu Font Awesome 4 icons for the time being, you can disable the Font Awesome 5 assets, and disable the Dynamic Conversion option. However, if you select new icons, they will only be Font Awesome 5-compatible.