Use an image for Bulleted List Points


On my homepage, in the blue ad for my book I have three items in a list. I want to replace the bullet points with this image:

I tried using this bit of code but it was unsuccessful :disappointed:

.li {
  list-style-image: url('wp-content/uploads/2015/11/bullet4.png');

I also tried with .ul and same result. Any advice? I have allowed access to my site if you need it :slight_smile:

  • Tyler Postle

    Hey rc_snowboarder,

    Hope you're doing well today!

    You got the right idea, you just don't need the "." before the ul or li tags. The period defines a selector as a "class"; however, in this case you just want to target the html tag itself, so you don't put anything in front of it. You will notice this is done with other tags such as h2, h1, etc. too.

    I've added this to your themes custom stylesheet:

    div.wpb_wrapper ul {
      list-style-image: url('wp-content/uploads/2015/11/bullet4.png');

    That seems to have worked :slight_smile:

    I added that via:

    Appearance > Suffusion Options > Backend > Custom Includes. Bottom of that stylesheet.

    Hope that helps! Any further questions just let us know.


    PS. I placed this: div.wpb_wrapper - infront of the ul tag to make the CSS more specific so it doesn't apply to every list item across your whole site, but if you see that list image showing up in places you don't want then we will just need to make the style more specific :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.