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 the 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.
Creating Navigation Menu Icons in WordPress
In two ways you can add icons to the WordPress menu. By CSS or a Plugin. We’ll explain both methods in this post.
Adding image icons by a simple CSS code
Initially, you have to download a desired icon from the web.
Some of the best sites to download 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 the 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(https://www.yourwebsite.com/wp-content/uploads/2020/03/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.
Adding image icons by a WordPress 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 anything that suits your requirement.
After selection, you will be sent back to the previous screen.
Save Menu to confirm. Done.
Go to the frontend and see the changes.
Read The 6 Best WordPress Button Plugins in 2020 (Free & Paid)