How to Add Image Icons With Navigation Menus in WordPress

Written by admin

On March 1, 2020

The number of online websites is increasing day by day so having a good design component is more important for your website than before. if you don’t update your website you will be lost many users, which can become your customer at the end of the process,

Adding infographics can help your customers to get the right information at the action they need to click. Having icons in navigation Menu stand out your website from other website having plain text menu, Check the difference in the images below.

Navigation menu without icon.

Navigation menu with icons.

There is two way to add icon in your navigation menu. You can add icons by using custom CSS and also WordPress has an amazing plugin which can allow a no-technical person to add icon very easily.

By using Menu Image plugin.

Login into your WordPress dashboard and go to add a new plugin in the left bar and search for Menu Image, Icons made easy. You can find the Menu images plugin by Rui Guerreiro. Install and activate the plugin. 

After activation, you need to visit Appearance » Menus page. 

Click on any menu item you find a new option set images under any menu item, you can also set images for hover and select the position of the image where you want to show the image below, above or before of your menu text, you can play with the option. 

Now for the images, you can create the image in photoshop or you can use flaticon website for the icon, I personally use their services because flaticon give thousand of icon for each niche, you can search the icon and select the size, so you don’t have to use any extra after downloading the image. After downloading the image set the image for each menu item.

After adding all icons for your menu items click on the save button and reload the website to see the magic.

By using custom CSS

You need to visit Appearance  => Menu.

At the right top of the page, you will find the screen options, click on it and make sure CSS Classes are checked.

After checking the CSS classes. Now you need to click on any menu item and you will find CSS Classes (optional) text box.

Now you can add this custom CSS code in your custom css section, 

 

.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

You May Also Like…

How to Update wordpress php  version

How to Update wordpress php version

If you are looking to update WordPress PHP version then you come on the right place in this talk we will discuss why we need to Update PHP version of your website if you are not running the latest version of PHP may increase your site load time and the research shows...

How to add Divi inline buttons (Side By Side Button)

How to add Divi inline buttons (Side By Side Button)

Creating a beautiful website is not enough for your business. You must increase your website authority for better ranking. Google has provided a complete list of how you can increase your website authority. One of the most important points is interlinking. Buttons are...

How to create beautiful Carousel in wordpress

How to create beautiful Carousel in wordpress

Do you want your website more engaging and visually appealing for your website visitors? If your website is appealing that you offer on your website may lose your lot of business so the question is how we can make our website more attractive and visually appealing. I...

0 Comments

Submit a Comment

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