How to Display Images as Bullets in an HTML List?

The following code example demonstrates Display Images as Bullets in an HTML List.

In order to show an image instead of the bullet for a list item, we can use the CSS property list-style-image. To provide the value to this property, we can use the url() function of CSS that can be used to include a file. Furthermore, here we are using the external stylesheet, so we need to create a CSS file named mystyle_1.css.

The following image will be used in this example.

Image for Bullet

liststyles.html

<html>
  <head>
     <title>External Stylesheet for List Styles</title>
     <link rel="stylesheet" href="mystyle_1.css">
  </head>
  <body>
      <h1>Applying List Styles Using External Stylesheet</h1>
      <hr>
      <h2>Courses in IITM</h2>
      <p>
		<ul>
			<li>BCA</li>
			<li>BBA</li>
			<li>B.Com.(H)</li>
			<li>MBA</li>
           </ul>
      </p>
  </body>
</html>

mystyle_1.css

ul {
  list-style-image: url('bullet.jpg');
}

Output

Further Reading