Less painful way to add a different icon to each link on a <li> (html list)

Question

take a look of this: http://jsfiddle.net/PFQke/

I want to add some icons to that menu system in a smart way, im not a front-end developer, so i suck at css.

This is what i like to have:

Thanks for any help!

Answer 1

Adding to each <li> a class like this:

<div id="vertmenu"> 
   <ul>
      <li class="home-ico"><a href="#" tabindex="1">Home</a></li>

Then add some css code:

#vertmenu .home-ico {
   background: url("path_to_img") no-repeat top left;
   padding: 2px 0 0 25px;
}

This is just an example, but you can start from this.
In example that padding has to be adjusted in case your icon is more than 25px large.

Answer 2

First and foremost use classes to differentiate items.

Those are different icons, so you need to give a different url attribute to the background-image property of each of those <a>. Even if you have them in a single image (sprites), you will still need to give them different coordinates each.

#vertmenu a.link1 {
  background-image: /* background image for a#1 */
}
#vertmenu a.link2 {
  background-image: /* background image for a#2 */
}

Do you use a single image for every icon (sprites)?

#vertmenu a {
  background-image: /* specify it only once */
}
#vertmenu a.link1 {
  background-position: /* background pos for a#1 */
}
#vertmenu a.link2 {
  background-position: /* background pos for a#2 */
}

---

Alternatively, you could insert your image in the div containing your menu, and use only one image. This way you will need only one css rule, but you won't have the rollover effect on the single images.

Something like this.

Answer 3

html:

<ul id="vertmenu">
  <li class="home"><a href="#">Home</a></li>
  <li class="about"><a href="#">About Us</a></li>
  ...
  <li class="links"><a href="#">Links</a></li>
</ul>

css:

#vertmenu {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12pt;
  width: 160px;
  padding: 0;
  margin: 0;
  border: none;
}
#vertmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none no-repeat left 50%;/* left and centered */
}
#vertmenu .home {
  background-image: url(home.jpg);/*specify image here*/
}
#vertmenu .about {
  background-image: url(about.jpg);
}
/* ... etc. ... */
#vertmenu a {
  font-size: .8em;
  display: block;
  padding: 5px 0px 2px 20px;/* change 20px to width of icon+some padding*/
  text-decoration: none;
  color: #666666;
  /*width:160px; not needed. also should have be 156px because of the 4px left padding */
}
#vertmenu a:hover, #vertmenu a:focus {
  color: #000;
  background-color: #eeeeee;/* will hide the icon!!*/
}