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.
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.
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).
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.
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.
As you can see, adding icons to sub-menu items is just as easy!
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!