Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 59: How to add an icon to the Thesis 2 nav menu

Thesis 2 Nav Menu Icon

In this step we’re going to learn how to put an icon in our Thesis 2 nav menu.  In the picture above, you will see the WordPress icon next to the WordPress menu text.  Once we learn how to do one menu item, the rest will follow the same procedure.  In fact, this turned out easier than I thought it would be.

How to put an icon in the Thesis 2 nav menu

First we need some icons.  I’m using a social media icon for WordPress in this example.  It is 32×32 pixels.  I think this is a good size for my site.  Your usage will depend on your layout.  In Step 28 we learned how to use a background image in Thesis 2 CSS.  Referring to this step, we’ll upload our icon(s) in the Thesis 2 Images page.

From the WordPress Dashboard > Thesis > Skin Editor > Images.

Thesis 2 Images Page

Choose your icon and Add Image (refer back to Step 28 if necessary) to your Images library.

WordPress Icon in Thesis 2 Images Library

Take note of the file location string (images/wordpress.png).

Next, we need to determine the HTML used for the menu item we are targeting.  In this example we are targeting the “WordPress” menu item.  In a separate browser tab, navigate to your site homepage.  Right-click and select “View page source”.  I’m using the Chrome browser in this example.  Different browsers may have slightly different menu options.

View Page Source

In the page source we need to locate our nav menu HTML.  It will look something like the picture below.

Thesis 2 Nav Menu HTML

For my “WordPress” menu item I see that it has an id=”menu-item-224″.  We will want to target our CSS on this id.

Now that we have found the id of our menu item let’s go to the Thesis 2 Custom CSS page.

Thesis 2 Custom CSS Tab

Scroll to the bottom of your Thesis 2 Custom CSS and add the following new CSS.

/* Add icon to nav menu text */
#menu-item-224 a {
display:block; 
padding-left:34px; 
outline:none; 
background-image:url('images/wordpress.png'); 
background-repeat: no-repeat;
background-position:left center;
}

A few things to note here:

  • Be sure to change the “#menu-item-224” to your specific item as found in your HTML.
  • The /* Add icon… */ is a comment that will help us remember what the CSS does six months from now when we’ve forgotten.
  • The padding-left will move the WordPress text just to the right of our icon.  Remember that my icon is 32 pixels wide.  Depending on your icon size you may need to experiment with this value.
  • The background-image URL will be specific the icon you uploaded.

Click the green “Save CSS” button and you’re done.

Thesis 2 Save CSS

We have now added an icon to the Thesis 2 nav menu.  You can repeat this process for each nav menu item as desired.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 4 comments… add one }
  • Shuvo July 2, 2013, 8:38 AM

    It’s really amazing . 😀
    Thank you so much for this tutorial.

  • Doug Macklem July 21, 2013, 7:54 PM

    You are welcome.

  • Nick Haubner May 30, 2015, 10:08 AM

    Thanks a bunch. Just added a little tent on my menu (created a “a:hover” effect too which looks good) This is a fantastic tutorial.

  • Doug Macklem September 14, 2015, 8:01 PM

    I like it.

Leave a Comment