Cacher is the code snippet organizer for pro developers

http://www.wpexplorer.com/adding-images-wordpress-menu/


Step 1: Enable Classes In Your WordPress Menu

By default the WordPress menu doesn’t show the “class” attributes in the menu builder, so hit the “screen options” and make sure it is checked.


Step 2: Add Style To Homepage Link

Now you can browse to or create a homepage link and add a new class to it. I added a class called “home-link-icon”.


Step 3: Add CSS For Home Menu Icon

Now the only thing left is adding the css to your stylesheet to show the icon for the class you just created. Note: Make sure you add the icon downloaded in step 1 into your theme’s images folder.


Step 4: Add Style To Homepage Link

Now you can browse to or create a homepage link and add a new class to it. I added a class called “home-link-icon”.

Step 5: Add CSS For Home Menu Icon

Now the only thing left is adding the css to your stylesheet to show the icon for the class you just created. Note: Make sure you add the icon downloaded in step 1 into your theme’s images folder.

Sample CSS:
.home-link-icon a{
   padding-left: 30px !important;
   background-image: url(images/home.png);
   background-position: left;
   background-repeat: no-repeat;
}