Font Awesome

Knowledgebase Docs » UberMenu 3
USEFUL? 8
UberMenu 3

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:

  1. A web font file
  2. A CSS stylesheet defining icon classes

SVG Icons with Javascript

SVG icons with javascript work by loading:

  1. 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