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 X
px (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>
18 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
2 Likes
sarahfrison
(Sarah - Webflow Expert/mod)
July 6, 2019, 4:41pm
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
5 Likes
This is one of those ‘why didn’t Webflow think of that?’ sort of things
4 Likes
Brilliant workaround - thanks for sharing.
2 Likes
PAV-TM
(Olga Rabo)
February 15, 2023, 11:55am
8
Thanks for sharing this! I had a rich text fetched from a CMS collection, and it still worked
1 Like
thank you so much for this step by step! so helpful and worked immediately on my site. cheers!