CODEWITHSUNDEEP
csshtml-lists
SwaggrK
SwaggrK

Reputation: 101

CSS using images instead of bullets

I want to use three different images instead of bullets to create a lisli>t

Example:

<ul>
    <li>The dog is big</li>
    <li>The dog is small</li>
    <li>The dog is medium sized</li>
</ul>

So instead of bullets before each of the above phrases there would be a different image before each.

Upvotes: 10

Views: 41973

Answers (4)

thirtydot
thirtydot

Reputation: 228152

Live Demo

This makes use of the CSS property list-style-image.

ul {
  margin: 0 0 0 32px;
  line-height: 1.5
}

.b1 {
  list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/Icons-mini-icon_attachment.gif);
}

.b2 {
  list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/6/61/Icons-mini-icon_security.gif);
}

.b3 {
  list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/a/ab/Icons-mini-icon_clock.gif);
}
<ul>
  <li class="b1">The dog is big</li>
  <li class="b2">The dog is small</li>
  <li class="b3">The dog is medium sized</li>
</ul>

Upvotes: 18

Yunus Eren G&#252;zel
Yunus Eren G&#252;zel

Reputation: 3088

There is such a property of CSS but i think that it doesn't work for every different <li> element:

ul
{
list-style-image:url("/images/blueball.gif");
list-style-type:square;
}

I hope it would help you

Upvotes: 0

vaugham
vaugham

Reputation: 1851

you can use the list-style-image property.

ul.dogbig
{
  list-style-image:url("/images/dogbig.gif");
}

Upvotes: 2

corroded
corroded

Reputation: 21564

Use list-style-image: url(imagename); to replace the bullets entirely with images. The downside of this method is that each browsers positions the images differently. CSS background images for list bullets is a more consistent method.

from http://css.maxdesign.com.au/listamatic/vertical04.htm

Upvotes: 7

Related Questions