Ever wondered how some WordPress websites add icons to their navigation menus? I guess the answer is yes that is why we are here today.
Being a designer and a developer one thing that always keeps me pushing is the curiosity but we’re not here to talk about me so let’s get right into it.
I know there are some WordPress themes out there that have options for adding icons to the navigation menu but sometimes we want to add our own custom icons which these themes do not offer options like that and that is why I’m going to show you how to add icons (or custom) to your WordPress navigation menu.
How to Add Icons to Your WordPress Website Navigation Menu
Before you do anything, install and activate the Menu Image plugin.
After activating it, you need to visit Appearance then click on Menus to see your navigation menu.
From here, you can click on any menu item in the in the right column to expand it. After that, you have two options adding the image icon and hover image icon.
The ‘Image size’ drop-down gives you the ability to select a size for the image icon. The size you choose will apply to both the menu icon image and image on hover.
You can also add your own custom size for the menu images, for this to work you need to edit your theme’s functions.php file. You can also set the title position above, below, before, or after the image icon. It also allows you to hide the title and only display the image icon for each navigation menu.
Once you have configured the settings, simply add image icons to all your navigation menu items separately. Next, you need to click on the ‘Save Menu’ button to see menu icons in action.
Pros and Cons
This is a solid WordPress Plugin no doubts, the only issue I have with the plugin is it doesn’t come with pre-installed icons and this means you’ll have to source for icons yourself apart from that I absolutely love it as it’s super easy to use and I added my icons in no time.