How to Add Image Icons with Navigation Menus in WordPress

The navigation menu on your WordPress site may look great. But you can make it even better by adding image icons.

Without using any plugins it is possible to add image icons to WordPress custom menus. But why do you need to add them? For better instruction to your users, it is good to have icons. People with minimum technical knowledge will find it beneficial if there are icons in the navigation menu.

— In this article, we will illustrate how to add image icons with navigation menus in WordPress without using any plugin. So, don’t go anywhere.

How to Add Image Icons in WordPress Custom Menus

The custom menu in WordPress is something that is available in version 3 and higher. WordPress menu icons are something that makes your site more attractive and professional. But before you go any further, you should know –

• There are only a few premium themes that allow adding icons for WordPress.
• You have to have some technical knowledge to add WordPress icons.
• This task is not possible with any free theme.

Now that you know the limitations, let’s start with the process of adding image icons with navigation menus in WordPress. We will go through the process in 4 simple steps.

Step 1 – Download icons for WordPress menus

First, look for suitable icons for your custom navigation menu and download them from Font Awesome or Findicons.

Step 2 – Make sure CSS classes are enabled

The “CSS class” attributes won’t show in the WordPress menu builder by default. Hit the “Screen Options” and make sure the “CSS Classes” are enabled.

Step 3 – Add and edit style to Homepage link

Now go to – Appearance >> Menus

Now scroll and create a homepage link on the item where you want to add custom icons. It will allow you to write CSS. The CSS class mentioned here must match the CSS class you will write in your CSS program later.

Step 4 – Add CSS for in custom home menu icon 

Now it’s time to add custom CSS in the stylesheet to show the icon for the corresponding class. Before adding CSS, you need to make sure you have the required icons in step 1.

Go to  – Appearance >> Editor

Locate your theme’s stylesheet where all the CSS files are contained. Now, copy and paste the following code –

The code is just for adding one icon to one particular menu. Remember, the class name is ‘homepage’. Here, the URL is the same URL that you copied from the Notepad.

For instance, if your menu has 5 categories, you will have to add the above code 5 times with their corresponding CSS classes. And, you have to replace the URLs for the different image icons accordingly.

Related one: How to take backup of WordPress site manually

This is just a sample. The icon can be different for your case depending on how you are using the icon and its type. If the description seems difficult for you, then watch this video. It shows the whole process in details and shows you an alternative way to add custom image icons in the WordPress menu –

Summary:

Great! Now you know WordPress icons in the navigation menu. If you don’t want to use codes or add custom CSS, there are WordPress icons plugins for adding image icons to your custom menu WordPress. We think installing additional plugins for this is not really necessary. — Especially when you are tech-savvy, you can do this easily with the process that we have shown in this article.

Thanks for reading this article. Leave a comment below if you have any confusion or query regarding the whole process.