Easy Navigation Menu Icons

Using icons in navigation menus is an excellent way to add an extra bit of visibility to any menu. So how can you go about implementing this in your own theme?

If this feature is not built directly into your theme then you’ll have some configuration to do to get it to work. This could be in the form of custom CSS (and probably some custom PHP coding) or you could go with an off-the-shelf plugin such as this one.

Fortunately, for our theme users, we decided to make this a core feature. By inserting a custom text box into the main WordPress admin navigation menu page it is now extremely easy to prefix any menu item with an icon!

Let’s see how we can add some icons to the main menu in our Minn theme. Here’s what the menu looks like before we start.

Minn No Icons

Go to Appearance > Menus in the WordPress admin and select the menu you want add icons to, and expand an individual menu item. Notice the additional text box entitled Specify Menu Icon Name. This is where you add a specific icon name.

Menu Admin Ui

The set of icons used is from the Font Awesome library. To see all available icons click the full list link. This opens the Font Awesome site showing the entire list of icons (which is 585 icons in Font Awesome v4.4.0 at the time of writing).

Font Awesome Icons

Simply copy or make a note of the icon name as it appears on the screen and enter it in the Specify Menu Icon Name text box. For example, expand the Home menu item and enter home. Hit the Enter key or click the Save Menu button to save your changes.

Admin Menu Icon

After the menu has been saved you’ll see that there is now an icon next to the Home menu item. This is for convenience and allows you to see at a glance which icon (if any) has been assigned to a particular menu item without having to expand it first!

Let’s add a couple more top-level icons as well as some sub-menu icons.

More Icons

As you can see, adding icons to sub-menu items is just as easy!

  • TOP TIP – In all WPGO themes you can even hide menu labels if you want to show icons only. To do this simply prefix a menu label with a double underscore. e.g. If you had a menu item with the label Home then replace this with __Home to hide it on the front end!

When hiding menu labels though make sure you enter a valid icon name in the Specify Menu Icon Name text box otherwise your menu item won’t be visible. Also, menu labels must never be blank or the whole menu item will be deleted when you try to save the menu!

About David Gwyer

Founder of WPGO themes and lead developer. I love creating themes that are intuitive and easy to use but deceptively powerful! I also enjoy tinkering around with plugins.

Leave a Reply

Your email address will not be published. Required fields are marked *