Changing Bullets for Icons?

How Do I Change Individual Icons for Bullets in an Unordered List?

It sounds easy but, everyone seems to fall short of an explanation when they talk about changing the bullets in an unordered list. Oh, they go into vast detail about throwing it up in an external CSS style sheet for one icon for all the bullets:

li {
background-image: url(custombullet.gif);
background-position: center left;
background-repeat: no-repeat;
padding-left: 20px;
list-style: none;
}

HTML:

or

li {
background:url(custombullet.gif) center left no-repeat;
padding-left: 20px;
list-style: none;
}

HTML:

But when it comes to explaining about how to change one image per one bullet, they just MENTION you can use SPAN. In fact their explanations are so lame they simply show examples of one icon.

But of course, I am not just asking to put an icon in place of a bullet. You knew that right? I am asking how to place an icon in place of a bullet that is a link.

 

Not sure what you mean by this?

It is possible to style each bullet differently, but before I go into it please just clarify that that is what you're trying to achieve. On a side note, not the nicest way to refer to guys that are putting effort in to try to help you out...

 

well i dont' consider a page with "oh you can change the bullet with an image with span" and that's IT, as being very helpful.

Yes, for instance: if i had a website for traveling and the motif was airplane / airport stuff -
- icon of a airplane
- icon of ticket agent
- icon of pilot
- icon of luggage

Like that.

 

If you're looking for a list with different bullet images then you can do it simply by styling each <li> differently:

Stylesheet:

.airplane { list-style-image:url(airplane.jpg); list-style-position:outside;}
.ticket { list-style-image:url(ticket.jpg); list-style-position:outside;}
.pilot { list-style-image:url(pilot.jpg); list-style-position:outside;}
.luggage { list-style-image:url(luggage.jpg); list-style-position:outside;}

Code (markup):

HTML:

<ul>
<li class="airplane">Bullet 1 Text</li>
<li class="ticket">Bullet 2 Text</li>
<li class="pilot">Bullet 3 Text</li>
<li class="luggage">Bullet 4 Text</li>
</ul>

Code (markup):

BUT
If you only want to have images showing (each <li> without any text), with the images as links, I'd just drop each icon image into an unordered list and link it as appropriate.

Is this of any use?

 

So non-link list items have a bullet and links have an icon right?

use 'li a' to control the bullet for a list item link, and just 'li' for the list item.

 

I came up with this:

<ul id="menulist">
        <li><span class="home"><a href="index.html">Home</a></span></li>
        <li><span class="community"><a href="community.html">Community</a></span></li>
        <li><span class="news"><a href="news.html">News</a></span></li>
        <li><span class="marketplace"><a href="marketplace.html">Marketplace</a></span></li>
        <li><span class="trade"><a href="trade.html">Trade</a></span></li>
        <li><span class="Shop"><a href="shop.php" class="shop">Shop</a></span></li>
</ul>

HTML:

Then I did the css like this, it might be bloated but this is what I came up with:

.home {
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image:  url(royal_My-computer-32.png);
	background-repeat:no-repeat;
	background-position:0 .5em;
}

.community{
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image:  url(royal_User-32.png);
	background-repeat:no-repeat;
	background-position:0 .5em;
}

.news{
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image: url(royal_Mail-32.png) ;
	background-repeat:no-repeat;
	background-position:0 .5em;
}

.marketplace{
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image:  url(royal_Internet-32.png);
	background-repeat:no-repeat;
	background-position:0 .5em;
}

.trade{
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image:  url(royal_Browser-32.png);
	background-repeat:no-repeat;
	background-position:0 .5em;
}

.shop{
	padding-left:33px;
	padding-top:10px;
	padding-bottom:10px;
	background-image:  url(royal_search-32.png);
	background-repeat:no-repeat;
	background-position:0 .5em;
}

HTML:

I'm sure this is overkill, but this is what I came up with. It shows a nice icon next to the linked word. I could probably make this even cooler, by doing maybe a mouseover with a slight background "glow" color behind the icon or something. just thought about that, no idea how to do it, but I'll see.