How to add icons to WordPress menus: Some examples

Do you want to make your menu more attractive with icons, or just add some social icon directly in it, even your logo or any other examples or reason that you can no doubt think about that involves icons or images in menus? The simple answer in WordPress is that ‘You can’. There are many ways that you can do it, from the simpler ones to the most complicated ones that involve coding / programming. This article is about the simplest way of them all, that gives a standard site a straightforward and easy way to make its menu look more appealing or at least more visual.

How to add icons to WordPress menus: 2 examples in one menu

Examples How to add icons to WordPress menus

How to add icons to WordPress menus: There is a user-friendly plugin for that

Menu Icons Plugin Settings

Menu Icons Plugin: Settings

Menu Icons is a user-friendly WordPress plugin that allows you to do just that without the use of any coding!

  • Find the plugin by searching for keyword ‘Menu icons’ in the plugin search box of yor WordPress installation
  • Install the plugin and activate it
  • Go to your WordPress menu (Appearance > Menus).
  • The left-hand box should now have the item Menu Icons Settings. Check all icon sets, for ampler choice, under global and configure the default settings for icons.

Add your menu item with icon

  • Add your menu item as you normally would, making sure you always enter a navigation label (the name of your menu item) even if you don’t want it to appear because you only want to display the icon (otherwise you get a ‘(pending)’ as you see below and the item might not be added!
  • In this example, we have chosen a custom link menu item, we have not yet put a label to our menu item (to demonstrate the ‘(pending)’ and we are adding a link to a social medium, in this case the Facebook page related to the website being developed.
  • Under the navigation label, you will see the label Icon and a link immediately after to select an icon from the vast number of icon types you have allowed yourself before, including adding your own image. Click on Select to choose one for your particular The new meta box on the left with the link to select an icon on the right
Menu Icons Plugin - Adding a menu item with an icon

How to add icons to WordPress menus – menu item

  • The box that opens offers you a view of the sets of icons you have enabled as well as the image option if you allowed it so you can add your own uploaded custom images. You can choose a type of icon on the icon set menu, enter a keyword to search for a specific icon (e.f. facebook), and a chance to preview the result by slecting an icon so that you can also adjust the setting, for example not display the label or change the font size.
  • Click select at the bottom right of the box when you are done. You can always get back to modify your settings by clicking on the icon in the menu item box, or remove the icon by clicking on remove

Conclusion

The Menu icons WordPress plugin is the simplest, most straightforward way to-date that we have found to add icons to WordPress menus. The advantage, even for digital experts like myself, is that it is easy to train our clients to use it and they don’t have to learn any complicated code. There are of course limitations in spite of its  number of icons, its flexibility, its many configuration settings, and the additional add-on tabs and image option that allow you even more. Those limitations might occur in more demanding websites e.g. that require change of icons on hover. Some loss of display integrity might also occur in more complex frameworks and underlying themes, wich might interfere with the plugin display. Always test across browsers before deployment. If you require an even more flexible and configurable option, watch out for the sequel for this article coming soon.

Manuella Essaka on Linkedin
Manuella Essaka
Manuella Essaka is a highly experienced Digital Consultant and Project Manager, with a successful track record delivering e-Learning, Website and Mobile Solutions to educators and learners, music professionals, businesses and organisations. She is passionate about empowering clients by developing their understanding and ownership of the digital solutions setup through regular jargon-free communications, structured training and analytical reporting.
%d bloggers like this: