Thesis

Replacing List Bullets with Images Using CSS

by Elizabeth on January 31, 2014

This post was originally published in February 2010. It has been updated with additional instructions for different scenarios.

Replacing standard HTML list bullets with images can be a great way to tie them into your overall theme and make your site more visually appealing.

Note: When I originally wrote this article, it was as part of a series of posts I was writing about customizing the Thesis theme for WordPress websites. However, the information applies to any site where you have the ability to edit the CSS file. You don't need to be using either WordPress or Thesis.

This is what a standard bulleted list looks like on a web page:

  • I'm writing a long list item 1 so you can see what happens when the text wraps across multiple lines
  • List item 2
  • List item 3

The HTML code to create this list looks like the following. The <ul> stands for "unordered list" and the <li> stands for "list item." (If you want to use numbers instead of bullets, you would use <ol>, or "ordered list".)

<ul>
<li>I'm writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Continue Reading >>

{ 31 comments }