CSS list-style-image Property
In this tutorial, you will see how the CSS list-style-image property works, its usage, syntax, values, examples, how to use it, and more. So, let’s begin.
Usage
We use CSS list-style-image property to define images as list-item markers. By default, HTML uses bullets and numbers as list-item markers. This property overrides the default condition.
Syntax
list-style-image: url | none | initial | inherit | revert | revert-layer;
Property Values
The list-style-image has the following pre-defined values.
- URL – It is the path where the image is located. The image will be used as a list marker.
- none – It’s the default value, no image will be used as a list marker.
- Global Values:
initial | inherit | revert | revert-layer | unset.
/* URL Example*/ list-style-image: url('image.jpg'); /* You can also specify gradient like this below*/ list-style-image: linear-gradient(to top right, yellow, orange); /* None is the default value */ list-style-image: none; /* Global values example */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; list-style-image: revert; list-style-image: revert-layer;
How to use list-style-image
We have two different methods to apply list-style-image property to the HTML list items.
First Method: Inline-CSS
<ul style="list-style-image: url('uploads/autumn-leaves.png');"> <li>United States</li> <li>Canada</li> <li>Japan</li> <li>United Kingdom</li> <li>Germany</li> <li>Singapore</li> </ul>
As you can see in the above code, we can use the style attribute to apply the list-style-image property to the list.
Code Output:
Second Method: External CSS stylesheet
For this, you just need to put the CSS rule in your external stylesheet. For example, if it’s an ordered list then simply use the element selector such as ‘ol’.
The following CSS code will change the bullets of an ordered list to the image defined.
ol { list-style-image: url('autumn-leaves.png'); }
Tip: You can create a unique class to apply images to specify items.
list-style-image Examples
Using Icons
You can also use icons instead of images to make your lists look more elegant.
To do this, first, you need to download icons. It can be in any format, but I always prefer SVG. After that, put the CSS code to apply them to the list markers. The syntax is the same as you have seen above.
Code Example to use SVG icons:
<ul style="list-style-image: url('flag-icon.svg');"> <li>United States</li> <li>Canada</li> <li>Japan</li> <li>United Kingdom</li> <li>Germany</li> <li>Singapore</li> </ul>
Using Gradients
Gradients can also be used instead of images or icons.
Code Example:
<ul style="list-style-image: linear-gradient(to top right, yellow, red);"> <li>United States</li> <li>Canada</li> <li>Japan</li> <li>United Kingdom</li> <li>Germany</li> <li>Singapore</li> </ul>
Common Issues
1. list-style-image size
What if the image size is bigger than the list of items?
The problem is common as you can see in the image below.
To solve this problem, you need to resize the image before using it. The image that I used was 200px wide, I changed this to 28px wide. That’s the reason the images are perfectly sized.
For resizing images, you can use any photo editor tool like photoshop, or canvas.
Furthermore, there is no other way to resize list-style images using CSS. However, you can use a background image instead of this property.
That’s all. This is how the list-style-image property works.
If you have any questions feel free to ask in the comment section below.
Also Read: How to Make a List without Bullets in HTML
Topic: CSS
