How to Add Image Icons to Navigation Menu in WordPress

Share this

image icons

 

We usually show navigation menu items as text links in WordPress. Do you want to redesign them by adding image icons to it?

You can add a cool home icon to Home menu or a library icon to Archives menu and so on. It is pretty simple and you will get guaranteed results within a couple of minutes.

In two ways you can add icons to the menu. By CSS or Plugin. We explain both the methods in this post and even a beginner can follow our step by step instructions for doing the job.

Add image icons by simple CSS code

Initially, you have to download a desired icon from the web.

Some of the best sites for icons:

Flaticon

Fontawesome

Iconfinder

Icons8

Materialdesignicons

Upload the icon to your WordPress media library. Copy its Url. We need it very soon.

Go to Appearance > Menu. You should enable a separate property known as CSS Classes to move ahead. It is not available by default.

Expand Screen Options from the top right corner (near to Help). Put a tick mark near to CSS Classes to enable the property.

Image Icons

Scroll down to the bottom to find the desired menu item where you want to show the icon. In our example, Home. You should see a new field called CSS Classes now.

Image Icons

Enter home.We will define the Class in next step. So you can type any name there. Save.

Open your theme’s stylesheet. Insert the following code.

.home{
padding-left: 10px;
background-image: url(http://www.yourwebsite.com/wp-content/uploads/2017/04/house.png);
background-position: left;
background-repeat: no-repeat;
}

Replace home with what you entered in CSS Classes field, in last step.

Define your icon URL as the background image. You can follow the same steps for adding image icons to other menu items too.

Add image icons by plugin

If you don’t want to go for coding, install Menu icons for doing the job. It is a simple plugin and let you beautify menu items with attractive image icons.

After installing the said plugin, visit Appearance > Menus to customize.

Open the desired menu item and you will get these kinds of options.

Image Icons

 

Tap Select to choose icons. A new window will open with various icons which are spreading across several categories. Choose anyone that matches to your requirement.

Image Icons

After selection, you will be sent back to the previous screen.

Save Menu to confirm. Done.

Go to frontend and see the changes.

 


Share this