Misaligned Custom LI icons (Using list-style-image property)

Hey there! 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?


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

Hey Nina

Try this:

  1. Select the list item

  2. Remove bullet settings:
    image

  3. Set a background image with these settings:

  4. Set the padding (and maybe margin if needed):
    image

  5. Enjoy result!

image