Use Images as Bullets in Your CSS Lists Print
This tutorial shows you how to use multiple images as bullets in your CSS lists. This is achieved by using a class for each image and styling each "li" as required.


The CSS


.mylist
{
list-style-type: none;
margin: 0;
padding: 0;
}

li.home
{
background-image: url(home.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 40px;
margin: .4em 0;
}

li.news
{
background-image: url(news.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 40px;
margin: .4em 0;
}

li.info
{
background-image: url(info.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 40px;
margin: .4em 0;
}


The HTML


<ul class="mylist">
    <li class="home"><a href="#">Home</a></li>
    <br />
    <li class="news"><a href="#">News</a></li>
    <br />
    <li class="info"><a href="#">Info</a></li>
    <br />
</ul>


The Result