How can I change the color of the bullets in Webflow without using code?
TL;DR
- Use Font Awesome icons: Remove default bullets, insert a text block with an icon, and change its color in the Style panel.
- Use a Div Block: Replace bullets with a small, circular div, customize its size and background color, and position it beside the text.
Webflow does not provide a built-in option to change bullet colors directly. However, you can achieve this by using Font Awesome icons or custom div blocks instead of the default bullet points.
1. Use Font Awesome Icons as Bullets
- Remove default bullets: Select your list, go to Typography settings, and set List Style to None.
- Add an icon manually: Drag a Text Block inside each list item and insert a bullet-like character (e.g., a • or an icon from Font Awesome).
- Change the color: Select the icon and adjust its Text color in the Style panel.
2. Use a Div Block with a Colored Circle
- Remove default bullets: Set List Style to None in Typography settings.
- Create a bullet manually:
- Drag a Div Block inside each list item.
- Set Width and Height to
8px(or any size needed). - Apply a Border Radius of
50%to make it a circle. - Change its Background Color as desired.
- Position the bullet:
- Set Position to Absolute or Relative to align it correctly beside the text.
Summary
Webflow doesn't allow direct customization of bullet colors, but you can use Font Awesome icons or custom Div Blocks as a workaround. Adjust colors via the Style panel accordingly.