Join the Webstudio community

Updated 10 months ago

@John from Create Today hey, can you

At a glance

The community member asked how to change list icons to something custom. The comments provided two methods: 1) using list-style-image and an SVG as a data URI, and 2) using a background image on every list item. Another community member suggested that there are probably other methods, and that customizing list bullets is just a CSS task that can be searched for. One community member requested a walkthrough of the second method, and another asked if the icons need to be colored before uploading as the background. However, there is no explicitly marked answer in the provided information.

@John Siciliano hey, can you share a video or docs on how you change the list icons to something custom?
J
B
5 comments
Method 1 is using list-style-imge and an svg as a data uri like this
Attachment
image.png
Method 2 is using a background image on every list item. That's what I used. Maybe it's old school idk
Attachment
image.png
probs other methods too. Nothing is unique to webstudio though its just css so you can search for customizing list bullets css
can you walk me through this method just so i have my bases covered?
i'm assuming with this method, you color the icons before uploading them as the bg?
Add a reply
Sign up and join the conversation on Discord