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
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.
- 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.
<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">
- 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.