In this small guide I will explain how Simon & I make our custom bullet lists. This can later be applied to other elements on your site because it’s really easy and flexible. So here we go!

The CSS

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

You can of course make this shorthand like this:
li {
background:url(custombullet.gif) center left no-repeat;
padding-left: 20px;
list-style: none;
}

The padding may vary depending on which icon you use.

The XHTML

<ul>
<li>Sample text</li>
</ul>

Samples

This can as I said be used in many ways and does not have to be limited to list elements. I often use them with <span> tags. It’s great for putting icons before text. The examples were taken from my blog.

Sample 1Sample 2

/ Alexander Radsby