Do you want to add picture icons in your WordPress navigation menus? Just lately, considered one of our customers requested for a simple means to add menu icons. On this article, we’ll present you the way to add picture icons with navigation menus in WordPress.

Why You Ought to Add Image Icons with Navigation Menus?

Normally, WordPress navigation menus are plain textual content hyperlinks. These hyperlinks work for many web sites, nonetheless, you can also make your navigation menu look extra interactive by including picture icons.

Image icons will also be used to make your menu extra noticeable. For instance, a stupendous picture icon subsequent to your contact page could make it standout amongst different hyperlinks in your menu.

With that stated, let’s check out how to simply add picture icons with navigation menus in WordPress.

Technique 1: Including Menu Icons Utilizing a Plugin

This technique is less complicated and it’s really useful for newbie customers as a result of it doesn’t contain code.

The very first thing you want to do is to set up and activate the Menu Image plugin.

Upon activation, you want to go to Look » Menus web page.

From right here, you’ll be able to click on on any menu merchandise in the in the proper column to develop it. You’ll see the ‘Menu picture’ and ‘Image on hover’ buttons in settings for every merchandise.

Utilizing these buttons, you’ll be able to choose or add the menu picture icon you need to use. If you’d like, then you’ll be able to simply add a menu picture and ignore the hover picture.

Within the ‘Image dimension’ dropdown, you’ll be able to choose a dimension for the picture icon. This dimension will apply to each the menu icon picture and picture on hover.

The plugin comes with a number of choices to select from. Nonetheless we suggest to preserve menu icons small through the use of 24×24 or 36×36 sizes.

 

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

add_filter( 'menu_image_default_sizes', function($sizes){
  
  // remove the default 36x36 size
  unset($sizes['menu-36x36']);
  
  // add a new size
  $sizes['menu-50x50'] = array(50,50);
  
  // return $sizes (required)
  return $sizes;
  
});

After getting configured the settings, merely add picture icons to all of your navigation menu gadgets individually. Subsequent, you want to click on on the ‘Save Menu’ button to see menu icons in motion.

Technique 2: Including Menu Icons Utilizing Code Snippet

This technique is for extra skilled customers who know their means round CSS.

First, you want to go to Media » Add New to add all of your picture icons in WordPress. As soon as uploaded, you want to copy their URLs and paste them in a textual content editor like Notepad.

Subsequent, you want to go to Look » Menus and click on on the ‘Screen Options‘ button on the high proper nook of your display screen. Within the display screen choices, you want to test the ‘CSS Courses’ choice.

After that, scroll down and click on on any menu merchandise to develop its settings. You’ll discover a ‘CSS Courses (Elective)’ subject the place you want to add a CSS class identify for the menu merchandise.

Now you want 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-repeat;
background-position: left;
padding-left: 5px;
}

On this CSS snippet, .homeicon is the category identify that you just added in the CSS Courses subject above.

Relying in your theme, you might want to tweak the CSS somewhat bit to get the right placement for menu icons. As soon as you might be glad with the consequence, repeat the method for all menu gadgets.

That’s all. We hope this text helped you find out how to add picture icons with navigation menus in WordPress.