Replacing List Bullets with Images Using CSS

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>

Before showing you how to replace those bullets with images, I’ll add that there are some other shapes you can use built into HTML itself. These include a circle, disc (filled circle), square, and various number formats. You can see the full list on the w3schools website.

You change the style by changing the definition for <ul> in your CSS stylesheet.

ul {
list-style-type: lower-greek;
}

Here’s what the list looks like now.

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

Note: If you use the CSS definition above, it will affect every list item you have on your site. If you want to just have that style for certain lists, you’ll need to create a new class to apply to the <ul>. For example, you could create a class called “lower-greek” and change your CSS to:

ul.lower-greek {
list-style-type: lower-greek;
}

Then you’d add that class into the <ul> tag in the HTML as follows:

<ul class=”lower-greek”>
<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>

Now, to change the bullet to an image, you can add an attribute called list-style-image to your CSS definition. For this example, I’m using a leaf image that’s 24 x 38 pixels. The CSS code would now be:

ul.leaf {
list-style-image: url(‘/images/leaf_icon.jpg’);
}

and the HTML would be:

<ul class=”leaf”>
<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>

This is what the list looks like on the web page:

I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines as well.

List item 2

List item 3

Now, you can see the problem with this approach is that the bullet isn’t positioned very nicely relative to the text. That’s because when you add the list-style-image attribute to the <ul> tag, it uses the same positioning and spacing between the bullet and the text, regardless of the size of the image. So that might work well if your image is about the same size as a standard bullet but not so well if it’s much bigger or smaller.

Warm Up with Savings at Amazon!

Another option is to eliminate the standard bullet altogether using the <ul> tag and then add a background image in the <li> tag so you can use further attributes to adjust the positioning exactly the way you want it.

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

The list will then look like this:

I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines as well.

List item 2

List item 3

Now, obviously, we still need to do a little more work. The bullet image is being cut off on the bottom so we need to set a list item height value that is at least as big as the height of the image. We also need space between the image and the text, which we set using padding-left. I’m also using some padding-top to align the text better vertically.

Note: Padding values will change where the text appears relative to the image within an individual list item. Margin values will change where the entire line—including the bullet—appears relative to other items on the page, including the next list item. You can also control the position of the bullet image using the background declaration, replacing “left” and “top” with actual pixel values. Basically you just have to start with something and then play around with the values until you have them where you want them.

I can’t give you exact values because it will depend on a number of variables including the size of the bullet, how much spacing you want, font size, and so on. But here’s the change I’ve made to the CSS and the resulting output.

Thank you for the informative tutorial. I have seen similar solutions to the problem but I found the best solution for me is to replace the list with a table having two columns, the image in the first column and the text in the second. One row per item. I feel I have more control of every aspect of the appearance that way (spacing, wordwrapping, indent, alignment etc.)

Art,
This is not a good approach for a lot of reasons. Using a table for information that is not tabular in nature violates semantics and makes it hard for people using a screen reader to interpret. You are also making a whole lot of work creating a table for every list.

Study up more on css properties and you can control every aspect of appearance, including using list-style-position (inside and outside) for indenting and alignment. Using tables for lists with bullets is simply, to be frank, bad practice. IMHO.

I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines

I just get the standard system bullet, not the leaf. What I’m trying to produce is a list that produces the same result as the .custom li.leaf example shown above, but somewhere in my code I’ve obviously done something wrong. Any help would be appreciated.

Hi Elizabeth
I came across your posting about nested lists with different images. It will be great if you can give some hints.
I stopped at a top level listing with the code
ul.puces {
list-style-image: url(‘http://www.benhenda.com/uploads/images/icones/puce_fleche_bleue3.gif’);
}
and this just display the first level of the list categories I have. What’s the trick to have a second level of listing with a different image ?
You can see my bookmarks list on my home page at http://www.benhenda.com
Thank you for help
Ben

Around the Interwebs

DEALS AND DISCOUNTS

Affiliate Link

Streaming Media Players on Amazon

Sale prices were last verified 03/03/15and may no longer be available.

Privacy Policy

Data collected through this website is used only for the purposes stated up front, e.g. sending newsletters to subscribers who opt in, selling products or services, etc. Tech for Luddites does not share or sell data collected.

Ads and Affiliate Links

Tech for Luddites is a participant in a number of advertising and affiliate programs. This means that if you take certain actions (click through, make a purchase) from links on this website, T4L may receive a commission for the referral.

Contact Tech for Luddites

To ask a question, share a tech tip, suggest a post topic, or provide feedback on this site, please email info@techforluddites.com.