If you have seen icons in a navigation menu, you may also wonder to use them on your WordPress website. But the problem occurs when you require coding skills.
If you’re a newbie, you can install and activate a plugin to use any of the icons from the Font Awesome library. But if you know a little bit of CSS, you can add image icons to your WordPress navigation menu items in no time.
The question arises if you need cPanel access or not. Well, in this tutorial, you need to add custom CSS. You can either use the default CSS editor from your admin area or the additional CSS space in the customizer.
Although most of the WordPress experts hide the theme editor for security purpose, so you can use the built-in customizer if you wish.
In this tutorial, I am going to provide you an example of the code to make you understand the concept, adding CSS is on you.
It’s because every person has a different method to add custom CSS.
Upload Icon Images to Your Media Library
First of all, you have to download icon images on your computer. Upload those images to your WordPress media library.
If you’re wondering to use icons instead of images, you have to integrate a third-party icon library, which increases the HTTP requests. So, I am going to offer you a simple solution, which doesn’t impact the page loading time of a website.
Now, follow the steps.
Step 1:
Step 2:
You can see a mega drop-down menu.
Under the “Show advanced menu properties” heading, you can see a box to check for CSS Classes, check it.
Step 3:
You can see a field to fill in under CSS Classes (optional). Let’s add “menuicons” as the CSS class. Click on the Save Menu button.
Step 4:
.menuicons {
background-image: url('http://www.yoursite.com/wp-content/uploads/2018/06/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}Note: Don’t forget to replace the image URL with the address you pick from your media library.
Let me show you from where you can copy it. Go to your media library, click on the icon image you want to display, copy the address you see in front of URL.
Here, I have shown you to add an image icon only for one menu item. For each menu item, you have to choose a different class and a new CSS code with the URL of that particular image icon.
Here is demo of the image icon I just added for the home icon.
As I have discussed earlier, there are different ways to add custom CSS. If you don’t want to load CSS from another source than your main CSS file, you can use FTP or cPanel to edit it.
Go to File Manager>> wp-content>> themes>> Theme Folder>> style.css, right-click and choose edit.
Almost every WordPress hosting offers cPanel access.
Add Image Icons to WordPress Navigation Menu Items
For many WordPress users, modifying the existing website’s layout can be scary because they might not have expertise in CSS.
But as you can see, you only require the basic understanding of CSS to set an image icon as a background image and adjust its position.
Conclusion
If you still think dealing with CSS can be hard, you should use a plugin then. Although following the steps you see above isn’t difficult.
I hope you can add image icons to WordPress navigation menu items.
Check out these top 3 WordPress hosting services:
- Check out our recommendations for the best wordpress web hosting.
