Adding custom list bullet

Design help Custom code
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.

5 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:

4 Likes
7

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.

8

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

Read her:

3 Likes
9

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

10

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

1 Like
11

@Siton_Systems I just used your method and it works great for unordered lists. Thanks for sharing this! The only issue is that it applies the custom svg bullet I added to ordered lists as well as unordered lists, because Webflow doesn’t differentiate between “All List Items” in an ordered or unordered lists. This means, when I went to style my ordered lists, the bullets showed up after the numbers. Have you solved this before?

12

@caseydb I would make a class for your UL, add the background to the class. This should make it so your OL will not have the background. You don’t want to affect “All List Items” with a change this big. :smiley: i

1 Like