How to Add Image Icons to Your WordPress Navigation Menu

We may want to add image icons to your WordPress navigation menu, because we have seen it on some website and we liked it.

Adding these icons to the menu makes our website stand out, and makes a more attractive design.

We will be able to do it, we have two methods, or using a plugin, or CSS code.

Obviously the plugin makes our work easier, but it is always advisable to avoid using plugins, if we have another way.

In this case, the other way is using CSS code, but this is reserved for more advanced users.

Anyway we are going to explain how to do it, and it is easier than it seems.

Using CSS Code

If we are going to add icons, the first thing we are going to do is download the ones we need.

We can find icons on the web, there are many pages that offer us the possibility of downloading them for free.

We are going to use icons from the Swift Icons page in this case.

Step 1

Go to Apparence → Menus in the WordPress Dashboard area. Click on the “Screen Options” button. In the screen options, check the “CSS Classes” option.

Step 2

Now we go down and click on any menu item to expand its settings. In the field “CSS classes (optional)” we are going to add a name for the CSS class for the menu item.

Step 3

We are going to upload our icon to the library, once this is done, now we have to copy the link generated from Media → Library, click on the icon.

Step 4

Now we have to enter the CSS code, and as always we have several options.

One is through cPanel, the file manager and edit your style.css, for example, using Filezilla or another FTP client.

In this case, we are going to add the following code so that the icon appears next to our link.

.icon_home{
background-image: url("https://website.com/wp-content/uploads/2020/08/home_icon.png");
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Using A Plugin

We are going to use a plugin to add an icon to our menu, and one of the best is “Menu Image”.

Step 1

In the WordPress Dashboard we go to Plugins – Add New and look for “Menu Image”. We install and activate.

Step 2

Once we have activated it, we return to the WordPress Apparence Dashboard – Menus menu.

Let’s see that two new buttons now appear in our menu, “Menu Image” and “Image On Hover” in settings for each item.

Step 3

Click on “Set Image”, there we select the icon for that link from the menu.

Now we can choose the behavior of the icon when we hover with the mouse.

We can also select the size and position.

It is easy to add image icons to your WordPress navigation, just follow the instructions, the web will be more attractive and it will take us very little time.

If you have not created your website yet, you may be interested Create Your Website With WordPress or How to Create a Website With Squarespace.