Streaming live at 10am (PST)

Adding custom list bullet

#1

Hi there,
I’m trying to add a custom image for bullets on my website. I’ve added the following custom code to the header with “pricing-features” being the class applied to the list I’m targeting. Not sure why it’s not working. Also, I’m not entirely sure I’m using the proper URL for the image. The image has been uploaded to the asset manager and I copied the URL from the little settings popup that comes up when you click the gear icon in the top right of the image preview.

ul pricing-features { list-style-image: url('icon-feature-check.svg'); }

This is the page here. I’m referring to the bulleted lists within the pricing columns. https://mx-deposit.webflow.io/pricing

Any idea why this isn’t working?

#2

You need to put the complete absolute URL to your image.

You can also just hide the original bullet, add a padding left to the list item, and add your image as a non repeat anchored to the left bg image.

2 Likes
#3

That still isn’t working (the absolute URL). Could I be targeting the element incorrectly? Does the image get published even if it isn’t used in the website anywhere?

ul pricing-features { list-style-image: url('https://uploads-ssl.webflow.com/5c65807b64ce1b130cf083e7/5c8933b92279ee85054abf8d_icon-feature-check.svg'); }
#4

I went with the background image plus padding route and that worked great. Thanks!

#5

Haha, honestly I do too. The bullets always was a hassle for me to code. And Webflow didn’t make it easier. Going to bg route is ok because it doesn’t break the list type and in terms of cassessibility, someone with a screen reader or a text reader will still see and navigate a list the same way. So I don’t see a bad practive here.

#6

I kinda wish this was a built-in thing, I use it all the time :slight_smile:

1 Like