Custom Bulletpoints on Rich Text

Design help Custom code
1

Hi everyone,

I’m looking to custom my bullets points by making them change into an svg icon.

Basically, i want that everytime i’m using bullet point inside a rich text it changes into the icon i defined. In fact, i succeeded to make this happen but i think there is a way less brutal…

Here the custom code i used to make custom bullet point :

.text-rich-text ul, ol { /* just to erase default style */
  list-style: none;
  margin: 0;
  padding: 0;
}

.text-rich-text li { /* make my text align vertically with the bullet point image */
	display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.5rem; 
}

/* it looks like Webflow automatically create a class for the first <li> element so i needed to add some rules to keep the position i want for the li */
.list-item { 
	flex-flow: inherit;
  justify-content: inherit;
}


/* and here i define my custom bullet point svg icon */
.text-rich-text li::before {
	content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-1, -1)" transform-origin="center"><path d="M4 13L9 18L20 6" stroke="%232C46FD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
  font-size: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

Maybe there is an easier way or a script that can manage this ?
Let me know if someone as a better idea !

Thanks a lot

2

Hi there,

Rich Text Elements support standard unordered lists, but customizing bullet points with SVG icons requires custom CSS, which is the correct approach you’re currently using. While you can create basic bullet lists using the insert menu or by typing a dash (-) followed by a space, the styling capabilities within the Rich Text Element itself are limited to the standard bullet point appearance.

Your CSS solution for implementing custom SVG bullets is the recommended way to achieve this customization. This gives you the most control over the appearance and behavior of your bullet points while maintaining the semantic structure of your lists.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Hi Corentin that looks pretty accurate.
For SVG icons especially that looks like the most common approach I see.

And the support AI bot nailed it! Very well done.

1 Like