How to set Image as Marker for List Items?

Image as Marker for List Items

To set an image as marker for the list items in a list using CSS, set list-style-image property for the list with the required path to the image, as shown in the following.

ol {
  list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/Social_icons-mac-22x22.png');
}

Examples

1. Image as marker for list items

In the following example, we take an ordered list and specify an apple icon, from Wikimedia, as marker for the list items.

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS list-style-image property to set an image as marker for list items, with examples.