Put an Icon beside your Navigational Button

I really like a clean yet unique designs of blog templates. I like playing with the CSS, the more i learned and understand how it work the more i like to experiment with it. One of my favorite web design site is Web Designer Wall -- and if you read this post 2008 design trends you will be amazed of artistic sites.

It look more attractive if your navigation buttons have an icon beside them, look at my navmenu and in my sidebar subscription menu. If you have don't have any navigation pages yet and you want to put them in your blog follow the steps i have in Steps on how to create your contact page and navigational button and when your done, you can come back and follow this steps to add icons besides you navigation pages.

Lets begin with this simple steps.
What we need to add a span tag inside your navigation button to make it look like this below:

<div id="navmenu">
<ul>
<li><span class="home"><a href="http://www.yourlinkurl.com">Home<span></span></a></span></li>
<li><span class="about"><a href="http://www.yourlinkurl.com">About<span></span></a></span></li>
<li><span class="RSS"><a href="http://www.yourlinkurl.com">RSS<span></span></a></span></li>
</ul></div>

Go to your Dashboard, Layout, Page Element then Html/javascript then add the above code.

The span class (Mark in Green) is where we place the icon, but don't be confuse because the url of the icon will be placed using the CSS -- you will see that in my next explanation below. One more thing that you need to remember is the div id (Mark in blue) take note that the navmenu should be the same name placed in your CSS.

Now, the CSS code to complete the process:

}
#navmenu ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#navmenu li span.home { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
#navmenu li span.about { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
#navmenu li span.RSS { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
}

Note: If you want to add another page go to your page element and another link from your html/javascript then add another line in your CSS Code (Mark in blue).

You're Done! i hope you find it easy to follow. Enjoy and i also included some icon resources for your.

Icon Resources:

1. Iconlet.com - Icon search engine, it's a free icon for your navmenu.
2. Intersmash - 300 images from 1800 sites - great source of icons.
3. Freeicon - Free beautiful web icons.
4. Smashingmagazine - Of course, my favorite.
5. Freeicondownloads.com - Free downloads of loads of icons.