▼
Streaming live at 10am (PST)

How to replace List Bullets to custom icons (SVG)

Community resources Webflow Tips
#1

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

image
image.png756×456 22.3 KB

LI - List item

Step1 - Add left padding (room for the icon)

image
image.png794×544 19.4 KB

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).

image
image.png755×536 26.6 KB

Done :slight_smile:

Related:

Fit artboard to bounds by adobe-illustrator

image
image.png751×847 39.9 KB

Another option:
custom code

<style>
    ul.class-name {
       list-style-image: url('https://my-file.svg');
    }
</style>
13 Likes
Adding custom list bullet
How to style unordered list item in CMS Rich text
#2

Rich Text

Same idea:

image
image.png1687×606 84.5 KB

image
image.png1690×485 69.1 KB

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

1 Like
How to style unordered list item in CMS Rich text
#3

Thanks for sharing with the community @Siton_Systems :raised_hands:

1 Like
#4

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:

4 Likes
#5

Thanks, very smart. :clap:

#6

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