Using Text As Bullets
Use li:before
with an escaped Hex HTML Entity (or any plain text).
Example
My example will produce lists with check marks as bullets.
ul {
list-style: none;
padding: 0px;
}
ul li:before
{
content: '\2713';
margin: 0 1em; /* any design */
}
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Browser Compatibility
Haven’t tested myself, but it should be supported as of IE8.
At least that’s what quirksmode & css-tricks say.
You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with <noscript>
for the images.
HTML:
<!--[if lt IE 8]>
*SCRIPT SOLUTION*
<noscript>
*IMAGE SOLUTION*
</noscript>
<![endif]-->
About background images
Background images are indeed easy to handle, but…
- Browser support for
background-size
is actually only as of IE9. - HTML text colors and special (crazy) fonts can do a lot, with less HTTP requests.
- A script solution can just inject the HTML Entity, and let the same CSS do the work.
- A good resetting CSS code might make
list-style
(the more logical choice) easier.
Enjoy.