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.

</>
Copy
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

</>
Copy
<!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.