[ACCEPTED]-Can you use different icon images for each list element within an unordered list?-html-lists

Accepted answer
Score: 14

You could add background images on each 4 list element, and use padding to push the 3 text away from it.

    <li class="li1">List 1</li>
    <li class="li2">List 2</li>

.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 2 is the same size as the image (or a bit 1 larger if you want spacing)

Score: 12

Using CSS3's :nth-child() selector, does not require 1 additional markup on each <li> element:

Live Demo




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+

Score: 1

I would suggest to use the icons as background-images 3 for each list element. With this approach 2 you can easily position the "bullet points" also 1 (especially horizontal positioning).

Score: 1

You try to set the list-style-image property on an a element. Try 1 setting it on the li element instead.

Score: 0

If you want to use different icons for each 3 list, than give each list an unique name 2 and use background-image and position it 1 appropriately in CSS.

Score: 0

Just use the image in content property of your 2 pseudo-element ::before:

li.item1::before {
    content: url(/Images/icon/item1-icon.svg);
    display: inline-block;
    width: 1em;
    margin-right: 6px;
    margin-left: -1em;

You obviously need to have 1 a class for each li with different image.

More Related questions