Bullets With Custom Images

I was asked today how you might make a bullet list in Thesis with images instead of standard bullets today. It depends on the bullet image you want to use. Mine was a 16px x 16px image. You have to play around with line-height and padding CSS values to get it to look right. And those values will be dependent on the size of your bullet image and your text.

Here is my bullet list :

Example of an Unordered Bullet List
  • Dogs
  • Cats
  • Birds
  • Fish
  • Rocks

Here is the HTML that goes in the post
HTML for image bullets in unordered list

Here is the CSS that you add to custom.css
HTML for image bullets in unordered list

Comments

  1. Unless you show me your code I can’t help. If you copy what I’ve done but obviously substitute in the URL of a 16×16 image of your own where I have written “url-to-your-image.png”, and you are using Thesis, it will work.

  2. Hi there, i tried your method to make bullets with images via css and mines just comes up with just a regular bullet but not the image.

Speak Your Mind

*