Adding Icons To Menu Items

Adding icons to your menu items is extremely simple in Total, but it must be done via the WP admin dashboard (not the customizer).

  • Edit any menu item and click on the “Icon Library” or “Custom” button under “Menu Icon”
  • Browse and click on any icon to add it to your menu item.
  • Save your menu.
Menu icon button
Select menu icon window

Custom Icons

You can use custom icons as well. For this, you will need to install a plugin that allows you to upload SVG’s to WordPress. A good solution is the Safe SVG plugin.

When using custom icons we recommend to get them from trusted sources such as FontAwesome, Material Design or Bootstrap.

Don’t See the Icon Field?

If you don’t see the icon select field most likely it’s disabled under Screen Options:

And if the Icon field is enabled and you still don’t see it, you may have a conflict with a 3rd party plugin breaking things.

Displaying Icons Without Text

If you wish to display icons in your menu without text you would instead need to modify the menu label to be an icon. This can be done via the theme’s icon shortcode. Below is a screenshot showing what that may look like:

Total menu item icon without text example

This screenshot was taken specifically from the Nouveau demo if you want to see the live menu in action.

  • Last updated on
Back To Top