UberMenu includes Font Awesome 5 (since UberMenu version 3.4 – previous versions include Font Awesome 4).
This article is specifically about loading and configuring Font Awesome assets. For information on setting icons on menu items, please see: Icons
Font Icons vs SVG Icons
UberMenu allows you to choose whether you use Font or SVG icons. By default, it is set to use Font icons.
Advantages and disadvantages
Both SVG icons and font icons have advantages and disadvantages; there is no single best solution for every use case.
Here’s a short list of some of the advantages of each option:
Font Icon Advantages
- Better support for older browsers
- Faster loading means there is usually no flash when the icons load
- Better scaling
- Crisper rendering (font icons may get anti-aliased)
- Better semantics using the svg element vs an empty i or span element
- Better accessibility
For a more in-depth discussion on SVG vs font icons, check out these resources:
Font Icons with CSS
Font icons work by loading:
- A web font file
- A CSS stylesheet defining icon classes
UberMenu FontAwesome Icon Asset Settings
To switch to SVG icons, you can enable the 3 SVG settings instead
Font Awesome Icon Sets
Please note that if you disable the Solid icon set, you should enable the Essential Icons SVGs
Font Awesome 5 breaks its icons into 3 sets: Solid, Regular, and Brands.
You can learn more about these sets and what icons they contain on fontawesome.com
If you leave all 3 settings enabled, a single file will be loaded containing all icons and loader scripts.
If you select a subset of the 3 settings, individual parts will be loaded in multiple files – so in that case, we recommend using a plugin like Autoptimize to combine all your scripts & styles to make your site load more efficiently. (You should be using such a plugin regardless for maximum efficiency).
Learn more about the files loaded for various sets here: Font Awesome: Get Started
If you are loading Font Awesome 5 elsewhere on your site, you can disable UberMenu’s copies of Font Awesome. Please note that if you run Font Awesome 4 elsewhere, those resources will not work with Font Awesome 5 icon classes.
Disabling Font Awesome
If you want to disable Font Awesome entirely, uncheck all the “Load” options for both Font Icons and SVG Icons. At that point, you should enable the Essential Icons SVGs, otherwise your submenu indicators, close icons, and hamburger icon won’t be displayed.
Updating from Font Awesome 4 to Font Awesome 5
UberMenu will automatically dynamically update your Font Awesome 4 icons (within UberMenu) to Font Awesome 5. For more information on this process, please see Converting Font Awesome 4 to Font Awesome 5