September 18, 2022

How to Use Image as Bullet in HTML and CSS

In this tutorial, we will learn how to use image as bullet in HTML and CSS. In an unordered list, the bullet, circle, and square can be changed to an image. An unordered list is created using the ul element and each list item is wrapped with the li element.

By default, in an unordered list, the items are marked with bullet points. To change a bullet point to an image, we can make use of the CSS list-style-image property with the value set to the path of an image.

In the following example, we have a list with bullet points and we will replace the bullet points with images using CSS. Please have a look over the code example and the steps given below.

HTML

We have one ul element in the HTML file with 3 list items.
In the head element, we have added a stylesheet style.css using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bullet to an Image</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <ul>
    <li>Sugar</li>
    <li>Rice</li>
    <li>Oil</li>
  </ul>
</body>

</html>

CSS

We are selecting the list using the ul element and are providing an image path to the list-style-image property. As a result, it will change the bullet points to images in the unordered list.
The image file happy.png is located in the image directory. You can use any image of your choice. Make sure to use a very small image equivalent to the size of an icon or slightly less than that.

ul {
    list-style-image: url(./image/happy.png);
}

You May Also Like: