How to replace List Bullets to custom icons (SVG)

[Siton_Systems (Ezra Siton)]

Less than 1 min.

UL - List

Step 1 Add list:
https://university.webflow.com/article/lists

Step 2 - Remove bullets:
list-style-type: none;

Step 3: Remove ul default padding

LI - List item

Step1 - Add left padding (room for the icon)

Step2 - Set background image
Use SVG (Better than png) - without any extra space around.
Left: 0;
top => “tricky” you should manually add Xpx (Depend on font type, font size and so on).

Done

Related:

Fit artboard to bounds by adobe-illustrator

Another option:
custom code

<style>
    ul.class-name {
       list-style-image: url('https://my-file.svg');
    }
</style>

[Siton_Systems (Ezra Siton)]

Rich Text

Same idea:

Cons: No way to combine some types of bullets inside rich-text for now.

[PeterDimitrov (Webflow Expert Partner)]

Thanks for sharing with the community @Siton_Systems

[sarahfrison (Sarah - Webflow Expert/mod)]

This is one of those ‘why didn’t I think of that?’ sort of things. I’ve always used custom code so this is

[Thijs_Vandeursen]

Thanks, very smart.

[new_work_city]

This is one of those ‘why didn’t Webflow think of that?’ sort of things

[william_hope]

Brilliant workaround - thanks for sharing.

[PAV-TM (Olga Rabo)]

Thanks for sharing this! I had a rich text fetched from a CMS collection, and it still worked

[Natalie_Avery]

thank you so much for this step by step! so helpful and worked immediately on my site. cheers!

[QH33 (Quentin H.)]

Hello,

How do you prevent it to apply on the ordered lists?

Whether it is nested inside a RTE or not, the icon applies everyone as list items are shared between ordered and unordered lists?

Cheers

[Jose_Urbano]

Hello,

I used custom CSS to remove the icon on all ordered lists.

You will need to have a “Global Styles” component that is just a Custom Embed with all the styling you need for each page in order to apply it globally. Then you add the below code:

<style>
  ol[role="list"] li {
    background-image: none;
    padding-left: 0;
  }
</style>

Basically we’re selecting all the List Items within Ordered Lists to have specific styling of

• no background image
• no padding

This will apply to all ordered lists, including the ones inside Rich Texts

Hope this helps!

[WebFlow_Helpers (webflowhelpers.com)]

Awesome! thanks for sharing.