Skip to Main Content

How to add icons to the menu of your WordPress site

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Not every theme offers this feature, yet for one reason or another we often want to add icons to our various menus. In this tutorial I will show you how to make this possible using the plugin Menu Image On WordPress.

menu-icon-ban

How to install and configure the "Image Menu" plugin

First, you install the plugin From your WordPress dashboard. You can also download this plugin as a zip file.

menu-image-installation-of-table-board

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

After installing and activating the plugin, access the menu management interface from your dashboard, which is equivalent to accessing the “ Appearance >> Menus ».

You will notice on each menu new options that allow you to add an image, but also to add an image to the hover.

presentation-of-functionalities-image-menu

The plugin has added new 4 fields, which allow you to:

  • Add an image " Set picture »
  • Add an image to the flyover " Set hover image is »
  • To choose the dimensions of the icons
  • Choose the position of the title in relation to the image (before, after, or just hide it).

Remark : you need to make sure to choose pictures with small dimensions. You can now consult your blog, to see how the plugin works.

menu-icon-demo

That's it for this WordPress tutorial on adding icons to your blog menu. Feel free to share the article with your friends on your favorite social networks.

This article features 6 comments

  1. Hello,
    I managed to download the plungin correctly, I loaded a logo, I see it appearing, but then it does not appear on my site!
    I want to put an email icon in the social networks menu, to have direct access to the contact page. I entered my facebook and instagram page and the logos appeared on their own (this must be foreseen in the theme) but on the other hand I can't do it with another link!
    Any ideas? what image size should I load?
    and what size of iamge should I choose in 'image size'? (I have already tried them all !!)
    Thank you for your help!

    1. Hello Silvène,

      Sorry for the very late response. In fact, as you can see, it all depends on the theme you use. If it allows everything you are trying to do then it will be easy, otherwise you will have to use a bit of css.

  2. Hello,
    I also searched for this feature and the extension is available again. And even in French (which was apparently not the case if I can believe the captures)
    In any case, the extension does the job well.
    Good discovery.

    1. Hello,
      what you need to know is that plug-ins evolve and so do their translations. a plugin that wasn't free a month ago can be free now.

  3. Looks great but impossible to find (with the keyword 'Menu Image': too many extensions have the same name. You would need the author's name or the tag.

    Thank you

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share3
tweet
Save1