Fancy UL/LI bullets

I've always been frustrated at the rather useless selection of bullet options for LI lists in CSS. So I decided to do something about it.

I developed a simple set of transparent PNGs and a set of CSS classes to boot. Here's the result: (the below image was generated using only ul/li code)

Download the bullet images here.

Then try this CSS: (be sure to update the image references accordingly)

ul.check li, li.check { list-style-image:url('li.check.png'); }
ul.x li, li.x { list-style-image:url('li.x.png'); }
ul.box li, li.box { list-style-image:url('li.box.png'); }
ul.box-on li, li.box-on { list-style-image:url('li.box-on.png'); }
ul.radio li, li.radio { list-style-image:url('li.radio.png'); }
ul.radio-on li, li.radio-on { list-style-image:url('li.radio-on.png'); }
ul.plus li, li.plus { list-style-image:url('li.plus.png'); }
ul.minus li, li.minus { list-style-image:url('li.minus.png'); }