A less painful way to add another icon to each link in an <li> (html list)

Question

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

I want to add some icons to this menu system in a smart way, im not an interface developer, so I suck in css.

This is what I like:

Thanks for any help!

Answer 1

Adding to each <li> class like this:

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

Then add the 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 with this.
In the example, when the indentation should be adjusted if your icon is more than 25px.

Answer 2

Use classes first to distinguish between elements.

These are different icons, so you need to specify a different url attribute for the background-image property of each of these <a> . Even if you have them in one image (sprites), you still need to give them different coordinates.

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

Do you use one image for each 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 can insert your image into a div containing your menu and use only one image. This way you only need one css rule, but you won’t have a rollover effect on individual 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!!*/ }