How to Add Image Icons With Navigation Menus in WordPress-01

Adding graphic icons to navigation menus is a fantastic idea.

It’s because users might never click on plain text links. Adding Images makes your Navigation Menus in WordPress more appealing and helps you focus on specific items. These little images are useful to visitors and provide a slight visual appeal for many. In addition, icons are frequently universal. It makes it easier to recognize specific functions or characteristics.

Consider this: when you think about the “save” button, what Image comes to mind? Many people think of a floppy disc, a hard drive, or another type of common storage device.

In reality, there is evidence that logos and symbols are more easily recognized than words.

In this article, we’ll discuss how to add image icons with Navigation Menus in WordPress

Why Should you Add Image Icons in Navigation Menus?

WordPress navigation menus are usually just plain text links. These links will work for most websites. But, adding image icons to your navigation menu will make it more interactive.

Image icons can also be used to draw attention to your menu. A stunning image icon next to your contact page, for example, can help it stand out among your other menu items.

With that in mind, let’s look at how to simply integrate picture icons into WordPress navigation menus.

Method 1: Using a Plugin to Add Menu Icons

This method is simpler and is recommended for new users because it does not need code usage.

The first step is to download, install, and activate the Menu Image plugin.

You must go to the Appearance » Menus page after activation.

You can enlarge any menu item in the right column by clicking on it from here. The ‘Menu image’ and ‘Image on hover’ buttons can be found in the settings for each item.

Image Showing Menu Structure

You can choose or upload the menu image icon you want to use with these buttons. Also, you can provide a menu image and ignore the hover image if you choose.

You can choose a size for the picture icon in the ‘Image size’ dropdown. Both the menu icon picture and the Image on the hover will be the same size.

There are a variety of choices available with the plugin. But, use 24X24 or 36X36 sizes for menu icons to keep them compact.

Image Showing image size

Add this code to your theme’s functions.php file or a site-specific plugin if you wish to create your unique size for the menu images.

add_filter( ‘menu_image_default_sizes’, function($sizes){

 

// remove the default 36×36 size

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

 

// add a new size

$sizes[‘menu-50×50’] = array(50,50);

 

// return $sizes (required)

return $sizes;

 

});

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

Image Showing Title position

After you’ve configured the settings, go ahead and add picture icons to each of your navigation menu items one by one. Then, to see the menu icons in action, click the ‘Save Menu’ button.

Image Showing Blog Post

Method 2: Use Code Snippets to Add Menu Icons

This option is for more advanced users who are familiar with CSS.

To begin, go to Media > Add New in WordPress and upload all your picture icons. You’ll need to copy their URLs and paste them into a text editor like Notepad once they’ve been posted.

After that, go to Appearance » Menus and select the ‘Screen Options’ option in the top right corner of your screen. You must check the ‘CSS Classes’ option in the screen preferences.

Scroll down and click on any menu item to explore its options. You’ll notice a field called “CSS Classes (Optional),” where you can name the CSS class for the menu item.

Image Showing Menu Structure in CSS Classes

This custom CSS must now be included in your theme.

.homeicon {

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

background-repeat: no-repeat;

background-position: left;

padding-left: 5px;

}

The class name you entered in the CSS Classes section above is .homeicon in this CSS snippet.

You may need to change the CSS a little bit depending on your theme to achieve the appropriate positioning for menu icons. Repeat the process for all menu items once you’re happy with the results.

The Navigation Menu should be fine-tuned.

It’s simple to create a custom menu icon in WordPress. The only thing you’ll have to worry about now is ensuring sure the menu bar is mobile-friendly. Whatever you wish to add, changing the navigation menu is a good place to start when giving visitors a method to manage your site.

Conclusion

Adding images can help to draw attention to items and make them more appealing. Images on navigation menu items attract the user’s attention, adding extra appeal. Images, such as a house image for ‘Home’ or a mail for ‘Contact Us,’ can be used instead of the menu text.

You can also use images instead of text, which is preferable if images fail to load. (But, these images are normally small in size, so loading shouldn’t be an issue.)

We hope this article informed you how to use image icons in WordPress navigation menus.

Load More Related Articles
Load More By Susana Taylor
Load More In How to

Leave a Reply

Your email address will not be published. Required fields are marked *