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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ol { list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/Social_icons-mac-22x22.png'); } </style> </head> <body> <ol> <li>Apple</li> <li>Banana</li> <li>Cherry</li> <li>Mango</li> </ol> </body> </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.