How To Add Custom Icon To WordPress Nav Menu

by

In this tutorial we will discuss how to add custom icon to WordPress nav menu. You have seen menu icon in many website specially in wordpress blog. I will show you how set custom icon in WordPress nav menu item step by step. Let’s start.

Steps:

1.
Add this code in your theme file functions.php

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;

});

2.
Now go apperance>>menus select screen options
select css classes

3.
Go to menu You will add class name
adding-css-classes-wp-menus

4.
Add the css code to your style.css

.homepage {
background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Leave a Comment