When you want to use an image for a bullet in your project, you can follow the next steps:
1. Create your image.
2. Use the list-style-image property which accepts a URL, which supports the path to your image file as a value.
You can use the next two files to test this:
File test.css
ul {
list-style-image: url(image1.gif);
}
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to use an image for a list item with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
<li>list item five</li>
</ul>
</body>
</html>
The next picture shows the result:
Using of an image for a list items with CSS