How to replace List Bullets to custom icons (SVG)

Less than 1 min.

UL - List

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

image

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

image

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

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>
20 Likes

Rich Text

Same idea:

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

2 Likes

Thanks for sharing with the community @Siton_Systems :raised_hands:

2 Likes

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

5 Likes

Thanks, very smart. :clap:

1 Like

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

4 Likes

Brilliant workaround - thanks for sharing.

2 Likes

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

1 Like

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

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

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!

1 Like

Awesome! thanks for sharing.