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:
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.
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.
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.
- How to Export Posts of a Particular Author in WordPress
- How to Show Author Bio in WordPress without Using Any Plugin
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.
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.
After selection, you will be sent back to the previous screen.
Save Menu to confirm. Done.
Go to frontend and see the changes.
