Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Use Images for Unordered List Bullets
If you’re looking for something different for your unordered lists, you could use images for bullets. This probably isn’t something you’d want to do with every list, but it can add some eye candy in the right places.You could also use image lists to get attention in a more subtle way than plastering a big headline on the page. Let’s look at two examples, one that uses an image for bullets, and one that uses a background image with a built-in bullet.
Using images for bullets is pretty simple if you use small bullets.
List Using Images for Bullets
- Guitars
- Drums
- Piano
The HTML
<ul style="list-style-image: url('images/music-note.png');">
<li>Guitars</li>
<li>Drums</li>
<li>Piano</li>
</ul>
That shows replacing the list bullets with images using an inline style, but you can also use embedded or external styles and keep your code less cluttered. Please see the style sheetstutorial if you need more details. You can also download images you can use for list bullets in the free graphics section of this site.
You can use any image you want, but if the image is too large there can be problems lining up the text with image bullets. See the list image bullet problems tutorial to solve this problem.
List Using a Background Image for Bullets
- Polar Bears
- Mountain Lions
- Badgers
The HTML
<ul class="paws-bg">
<li>Polar Bears</li>
<li>Mountain Lions</li>
<li>Badgers</li>
</ul>
The CSS
ul.paws-bg {float: left;
background-image: url('images/paw-bg.jpg');
list-style: none;
padding: 2px 0 2px 24px;
width: 200px;
border-top: 1px solid darkgreen;
border-bottom: 1px solid darkgreen;
margin-right: 20px;}
That's one more thing off my to-do list. What will you do-do with it?
Wait . . . did I just write "do-do" in a tutorial?
