Why add image icons with navigation menus?

WordPress navigation menus are usually plain text links. These links work for most websites, but you can the navigation menu look more interactive by adding picture icons.

Image icons can also be used to make your menu more visible. For example, a nice picture icon next to your contact page can make it stand out from other links on your menu.

With that said, let’s see how to easily add image icons with navigation menus in WordPress.

Method 1: Add menu icons using a plugin

This method is simpler and recommended for novice users because it does not involve any code.

The first thing to do is to install and activate the plugin Menu image

Upon activation, you must visit the Appearance »Menus page.

From there, you can click any menu item in the right column to expand it. You will see the “Menu Image” and “Scrolling Image” buttons in the settings for each item.

With these buttons, you can select or load the menu image icon you want to use. If you want, you can load a menu image and ignore the floating image.

In the “Image size” drop-down menu, you can select a size for the image icon. This site will be applied to both the menu icon image and the image when scrolling.

The plugin comes with several options to choose from. However, I recommend that you keep the menu icons small by using sizes 24 × 24 or 36 × 36.

If you want to add your own custom size for menu images, you can do so by adding this code in the functions of your theme.php file or a site-specific plugin.

Code adds custom size for menu images

add_filter ('menu_image_default_sizes', function ($ sizes) {

// remove the default size 36 × 36

undefined ($ sizes[‘menu-36×36’]);

// add a new size

$ sizes[‘menu-50×50’] = table (50.50);

// return $ sizes (required)

return $ sizes;

});

You can also set the title position above, below, before, or after the image icon. It also allows you to hide the title and show only the image icon for each navigation menu.

Once you’ve configured the settings, just add picture icons to all of your navigation menu items separately. Then you need to click on the “Save Menu” button to see the menu icons in action.

Method 2: Add menu icons using a code snippet

This method is intended for more experienced users who know YOUR CSS PATH.

First, you need to visit Media »Add New to upload all of your image icons to WordPress. Once downloaded, you need to copy its URLs and paste them into a text editor like Notepad.

Then you need to go to Appearance »Menus and click on the“ Display Options ”button at the top right corner of your screen. In the screen options, you must check the option ‘CSS classes.

After that scroll down and click on any menu item to expand its settings. You will see a “CSS Classes (optional)” field where you need to add a class name CSS for the menu item.

Now you need to add this custom CSS to your theme.

.homeicon {

background image: url ('http://www.example.com/wp-content/uploads/2018/09/home.png');

background-repeat: no repetition;

background position: left;

fill-left: 5px;

}

In this CSS snippet, .homeicon is the class name you added in the CSS Classes field above.

Depending on your theme, you might need to tweak the CSS a bit to get the perfect placement for the menu icons. Once you’re happy with the result, repeat the process for all of the menu items.

That’s all. I hope this article has helped you learn how to add image icons with navigation menus in WordPress.