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;
}
