Streaming live at 10am (PST)

Adding custom list bullet

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?

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

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'); }

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

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.

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

2 Likes

VERY surprised such a common occurrence isn’t included within the Webflow. How many sites do we all visit daily that has a list with custom icons? I know with my searching that’s near the majority of websites.

No need for custom code her + by minimal CSS use any icon you want.

Read her:

Dang, this is good but I need each list item to have its own unique icon - not common throughout the entire list.

Anyway for more ´icons´ => you need more ´classes´ (Also in plain HTML). The idea of custom bullets is for basic design.