Custom List Markers

Unordered lists in HTML web pages generally use bullets to begin list items. Sometimes circles or squares. But it doesn't have to be that way.

You can use an image instead of bullets.

Here is how to do it.

1. Make an image to use. The image must be a size suitable for the list you will be using it with. Put the image on your server and note its URL.

2. Make a CSS class for the list items you want to affect. Specify the URL of the image to use.

   Example:

   <style type="text/css">
   .my-list-image {
   list-style-image:url('https://www.willmaster.com/possibilities/images/uni-head.png');
   }
   </style>
   

3. To implement, use the class name my-list-image in the ul or ol tag. (Or any other class name that suits you.)

   Example:

   Here is code for an example (displayed at the next list item).

   <ul class="my-list-image">
   <li>The unicorn head image can be replaced by any other image you intend to use.</li>
   <li>The image needs to be correctly sized before using it as a list bullet.</li>
   <li>You can see possibilities now, I am certain.</li>
   </ul>
   

4. Here is what the above code renders.

   • The unicorn head image can be replaced by any other image you intend to use.
   • The image needs to be correctly sized before using it as a list bullet.
   • You can see possibilities now, I am certain.

The unicorn head was cropped from a larger image. The cropped image was then reduced to a size suitable for the example list.

To reiterate, when you want to use your own image instead of bullets for your list items, this CSS is what you need:

list-style-image:url('[IMAGE_URL]');

Replace [IMAGE_URL] with the URL to the image you wish to use. The list-style-image property can be used inline or within a style sheet.

(This content first appeared in Possibilities newsletter.)

Will Bontrager