CSS Tricks: Replacing List Bullets with Images

In some of the cases, the standard HTML bullets list can not be what we want, sometimes we need to use images instead of the list bullets. In this example, we will see how we can achieve it.

To create the list we will use the <ul> element which stands for unordered list and the <li> elment which stands for the list item, the HTML code to create a list with list items looks like these:

<ul>
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three</li>
</ul>

When we look our code in the browser we got the following result:

To change the bullet to an image, we will add two new CSS classes one for the <ul> element the other one for the <li> element. For the list class, we will set the padding and the margin to "0" and set the list-style-type to none. In the star class, we will set the background with our star png file, set the background to no-repeat and set it to left top, after that we need to set the height and the padding-top and padding-left (You might need to use different numbers depend on image to be positioned nicely relative to the text.).

.list{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.star{
  background: url('img/star.png') no-repeat left top;
  height: 34px;
  padding-top: 7px;
  padding-left: 44px;
}

And the HTML code should look like this:

<ul class="list">
  <li class="star">List Item One</li>
  <li class="star">List Item Two</li>
  <li class="star">List Item Three</li>
</ul>

And we got the following result: