Can you use different icon images for each list element within an unordered list?

Question

I'm not an advanced user of CSS, but I have a decent working knowledge i suppose. I'm tryin to make an unordered list that uses different icons for each list element. I would also like the background colour of the list element to change upon hover.

Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)?

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>

Using the list-style-image on the ul level makes all of the icons the same, and I haven't been able to figure out another way. Most examples I've found teach you how to use images in a list, but only if the bulleted images are the same. I'm definitely open to suggestions and improvements on the way I'm trying to do this.

thanks

<div class="content-nav">
  <ul>
    <li class="instructions"><a href="instructions.html">Instructions</a></li>
    <li class="voters"><a href="voters.html">Voters</a></li>
  </ul>
</div>

.content-nav {
    font-size:12px;
    width:160px;
    z-index:0;
}

.content-nav ul {
    padding:0 20px;
    margin:30px 0;
}

.content-nav li {
    padding:5px;
    margin:5px 5px;
}

.content-nav li a {
    color:#666;
    text-decoration:none;
}

.content-nav li.voters a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.voters a:hover {
    background:#0CF;
    color:#000;
}

.content-nav li.instructions a {
    background:#FFF;
    color:#666;
    text-decoration:none;
    list-style-image:url(images/voters.jpg);
}

.content-nav li.instructions a:hover {
    background:#0CF;
    color:#000;
}

Sicken

You're currently applying list-style-image to the a elements instead of the li elements, so that won't work. – Adila

i'm going to adjust the background image instead, but thanks for the tip. – Sicken

Answer 1

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)

Ignite

Answer 2

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+

Deck

You can use Selectivizr to bring this down to IE6, too. If you also apply list-style-position:inside; (related MDN) to the ul li, then the icon shares the space with the text (rather than hovering beside it), which can make positioning easier. – Durer

Answer 3

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).

Adellaadelle

Answer 4

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

Lallage

Answer 5

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

Schiff

By name, I mean class or id as you see appropriate. – Schiff

Answer 6

Just use the image in content property of your 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 a class for each li with different image.

Ta

Answer 7

/* Cờ cho language switcher */
.widget_polylang ul {
    list-style: none;
}
.lang-item-en:before {
    background: url(/wp-content/uploads/2020/03/us.png) no-repeat 0;
    padding-left: 20px;
    content: "";
}
.lang-item-vi:before {
    background: url(/wp-content/uploads/2020/03/vn.png) no-repeat 0;
    padding-left: 20px;
    content: "";
}

i code for Polylang's language switcher

Tass