Using icons in place of bullets

[Imtom14 (Tom)]

I am trying to have a tick in place of my bullet points.

The fonts tick is a bit ugly so I am wanting to use an icon from the Google material font which I have uploaded to my site.

Does anyone know how I would go about doing this?

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[leart_alert (Lea Schumm)]

Hi there
I just learned about that so I’m happy to share. You can use custom properties to achieve that.

• A deep dive into that topic is here: https://www.youtube.com/watch?v=yBOsSonEi80&list=PLfAUQE9dhv_Ps_S8whpt-IO5lyKixs7o2&index=4
• Or just the Property you need: list-style-image:url(“insert your url here”)
  → copy the URL of your icon
• A useful list of properties with preview: Webflow CSS Tools

Hope that helps!

[nina.martinez (Nina)]

Does anyone have any insight on how to style and align custom li bullets in Webflow?

Issue:
I added a checkmark as a custom list bullet using the custom CSS property “List-syle-image”. When I do this, the list item ends up being misaligned.

Things I’ve tried

• Setting the li to flex. The bullet points just disappear
• Setting a negative top margin. The whole element moves, not just the text
• Setting bottom padding. The height gets bigger but they don’t align
• Unchecking all styles in the Chrome Inspector (nothing specific seems to be triggering it)
• Googling & Webflow forum (couldn’t find anything there)

Does anyone have any other ideas?