Menu Close

How To Add Icons To Your WordPress Menu


The “not-so-new-anymore” WordPress 3.0+ custom menu feature is not only extremely useful but is also very powerful. I have already written a few posts about editing and customizing the menu (such as how to highlight current page links) and today I will show you how you can add special classes to your themes so you can easily show custom icons next to your navigation links.

Adding A Home Icon Next To WordPress Homepage Link

In order to better explain how to add icons I will take you through the steps for adding a home type icon next to your homepage link.

Step 1: Download a cool home icon

For the sake of this preview I just went over and downloaded a simple home icon from – link

Step 2: 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.

WordPress Menu Classes

Step 3: 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”.

WordPress Home Link Class

Step 4: 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;

Sample Image

Below you can see my css in action in a theme I am currently working on to release for free over at my Free WordPress Themes section. It’s not really positioned perfectly and the icon doesn’t match, but for the sake of this tutorial you can see how it’s supposed to work.

WordPress Theme Home Link Demo

View Source
Posted in WordPress