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
Font Awesome 5 provides two ways to create icons on your website: SVG with JS and Web Fonts with CSS
UberMenu allows you to choose whether you use Font or SVG icons. By default, it is set to use Font icons.
Please note that if you are running Font Awesome 5 SVG with Javascript on your site (as many themes do), it will automatically convert your UberMenu font icons to SVG icons, regardless of your UberMenu settings
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
- No javascript required to display icons
SVG Icons with Javascript Advantages
- 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:
CSS Tricks’ Inline SVG vs Font Icons
Sitepoint’s The Great Icon Debate: Font vs SVG
Font Icons with CSS
Font icons work by loading:
- A web font file
- A CSS stylesheet defining icon classes
SVG Icons with Javascript
SVG icons with javascript work by loading:
- Javascript files, which load SVG definitions and dynamically replace icon markup in the page
UberMenu FontAwesome Icon Asset Settings
By default, UberMenu will use the Font Icon option for Font Awesome 5. This choice was made to maximize browser compatibility, avoid content shifting when the icons load on your menu, make backwards compatibility with Font Awesome 4 as smooth as possible, and so as not to affect Font Awesome icons outside of UberMenu (if you use SVG via Javascript, the Font Awesome script will replace all Font Awesome icons with SVG).
However, you can choose to use SVG via Javascript if you prefer by visiting your Control Panel > General Settings > Font Awesome
To switch to SVG icons, you can enable the 3 SVG settings instead
You can then optionally disable the Font Icon settings. If you do, note that you will likely see a flash of shifting content when the icons load via Javascript.
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