Can you use different icon images for each list element within an unordered list?
Using CSS3's :nth-child()
selector, does not require additional markup on each <li>
element:
Live Demo
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
ul li:nth-child(1) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}
Browser Support: IE9+, FF3.5+, SA3.1+, OP9.5+, CH2+
You could add background images on each list element, and use padding to push the text away from it.
<ul>
<li class="li1">List 1</li>
<li class="li2">List 2</li>
</ul>
.li1 {
background:url('li1.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
.li2 {
background:url('li2.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
Just make sure the padding-left is the same size as the image (or a bit larger if you want spacing)
I would suggest to use the icons as background-images for each list element. With this approach you can easily position the "bullet points" also (especially horizontal positioning).