list-style-image

The list-style-image property sets the picture that you want to use as the bullet character in lists. This means you are not just stuck with the circles, discs and squares.

For example:

ul { list-style-image: url(star.gif) ;}

If you use this property on the <ul> tag, the same bullet appears for every item in the list. For example:

Alternatively, you can apply the property to each list item.

li.redball   {list-style-image: url(redball.gif);}
li.blueball  {list-style-image: url(blueball.gif);}
li.greenball {list-style-image: url(greenball.gif);}

Netscape doesn't support this property, it just replaces your image with the standard solid circle. I don’t suppose that's the end of the world.

Internet Explorer does support the property but it puts the text right up against the picture. So, you'll either have to pad your picture with white space, or put a non-breaking space ( ) at the start of a list item.

Don't use big bullet pictures because they can mess up the alignment and wrapping of the list and they make your pages load slower.