Free Diamonds and Squares Bullet Set

It’s the small details that can make all the difference in a site design.  Just using a fancy bullet instead of a disc or square can really dress up your lists. It’s difficult to find good bullet sets out there, so I’m offering this set free for any use, commercial or private.

Download transparent PNGs here or if you have a high percentage of visitors still using IE6 (and your background is white) you might want the non-transparent PNGs instead, as IE6 does not support PNG transparency.

Wondering how best to set up your CSS to use an image instead of the standard options?  Here is a quick run down:

Instead of the standard:
ul
{
list-style-type: disc
}

Make the bullet the background image of your list element, like so:
ul {
list-style: none;
}

li {
padding-left: 12px;
background: url(“images/diamond.png”) no-repeat;
background-position: 0 4px;
}

In the background position element, the first value is the horizontal position and the second is the vertical. The top left corner is 0 0. You’ll likely have to play around with the background positioning to get the bullets centered, and be sure to check the appearance in several browsers.