How To Add Icons With Navigation Menu Items In WordPress?

add icons with navigation menu items in wordpress

You may have noticed at many websites having the images along with the categories shown in the navigation menu.

Just a few days ago, I was working on a WordPress theme and this idea stuck in my mind.

What do you need to enable those shiny images with every menu item? You will have the easiest guide to add icons with navigation menu items in WordPress.

As you all know, WordPress repository is full of plugins and you can get the solution of every WordPress problem.

Use The WordPress Repository To Find A Plugin.

Search, install, and active the “Menu Image” plugin on your WordPress website.

There is nothing much to do with this plugin. You don’t need to do any setting. Just after installing it, you will find the option in the menu handling field to add the images for each of the menu items.

Go to Appearance>>Menus and select the menu you want to edit.

Many websites have the header menu and the footer menu.

It’s important to select the menu to want to edit.

Choose any menu item from the list and you will find an option to “set image“. Click on that option and choose the image from your WordPress Media Library.

how to add icons

It would be better if you upload the proper size images at the initial stage. Though, the plugin can change the size but still, wouldn’t it be great if you use your own image size?

You will have the options to choose the image size from 36×36, 48×48 and many others.

You can select it from the list.

There are many options to choose the location of the image. It would include “after, before, above” etc.

Choose the perfect location according to your theme and the website design.

I have used a simple WordPress icon. You can add any other icon if you want.

The result would be like this.

how to add image with navigation menu items

You have successfully added the images with the menu item. Now repeat it for all the items for all of your navigation menus.

There is also a manual method but it doesn’t work for all the themes.

For today, the plugin is the only solution.

Did You Find It helpful? What Would You Like To Add?

There are many people who want to add the different, attractive icons in the menu.

Somehow it increases your website design. People like such things. Most of the premium themes are having the dash icons.

But here, you have to use the plugin. Are you going to add icons with navigation menu items in WordPress?

What would be the size of the images? People would love to hear from you.

Connect with us on Twitter, LinkedIn, and Facebook.

by Ravi Chahar

A WordPress Professional and a LinkedIn influencer. A coder by passion and a blogger by choice. WordPress theme development is what he can rock with. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

6 comments

  1. Hi Ravi,
    It would definitely make the menu appear attractive, which leaves a higher chance of clicking. As always, a great guide and that plugin look light. Hope it does not affect the page load?

  2. Thanks for showing us how to do this Ravi! I’ve always wondered how to do this. I should have known it was as easy as installing a plugin. 🙂

    There are so many plugins to choose from so it’s hard to tell which one actually works until we get the scoop like this post. 🙂

    Thanks for sharing Ravi! Have a great week.

    Cori

    1. Hey Cori,

      You’re right. WordPress repository is full of plugins and we can’t find the right plugin. It was hard to for me to find a plugin like this.
      Maybe you can try it sometime.
      Thanks for stopping by.
      Have a great week ahead.
      ~Ravi

  3. Thank You Ravi for sharing. I have seen many blogs where they used to add icons in the menu. I tried to find good plugins but nothing good found.
    Going to try this one.

Leave a Reply

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