Images as list item markers
Using list-style-image.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Images as list item markers</title>
<style>
ul {
list-style-image: url("/examples/images/tick.gif");
list-style-type: square; /* good practice to also add this */
}
</style>
</head>
<body>
<ul>
<li>List item image markers</li>
<li>Can be defined with <a href="http://www.htmldog.com/references/css/properties/list-style-image/"><code>list-style-image</code></a></li>
<li>Can also be defined with the <a href="http://www.htmldog.com/references/css/properties/list-style/"><code>list-style</code></a> shorthand property</li>
<li>Remember to use a generic list item marker (using <a href="http://www.htmldog.com/references/css/properties/list-style-type/"><code>list-style-type</code></a>) as fallback</li>
</ul>
<!-- Link back to HTML Dog: -->
<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>