Why isn't the custom image bullet code working for my bulleted lists within the pricing columns on my Webflow website?
TL;DR
- Use proper List (ul) and List Item (li) elements instead of paragraphs to enable custom bullet styling.
- Apply custom bullet styles to li elements using ::before and background images, ensure the image URL is valid, and check for conflicting or overridden styles.
- Publish and view the live site to confirm that custom bullets render correctly.
If your custom image bullets aren’t displaying correctly in your pricing columns, it's likely due to CSS overrides or structural issues in your Webflow setup.
1. Check List Structure in Designer
- Confirm you're actually using a List (ul) and List Items (li) inside your pricing sections.
- If you're using Paragraph blocks with manual line breaks or non-list elements, custom bullet styles won't apply.
2. Ensure Custom Bullet CSS is Properly Applied
- In Webflow, go to the Style panel and select the List (ul) element.
- Set List Style: None to remove default bullets.
- Apply the background-image or ::before pseudo-element styling using a custom class on the List Item (li), not the entire list.
3. Use Custom Code Correctly
- If you're using custom code in an Embed block or Page Settings, ensure the code is in the correct format.
- For example, to add an image as a bullet, use
list-style: none;on theliand then styleli::beforewith a background image and proper padding/margin.
4. Verify Image Source
- Your bullet image must be hosted publicly or uploaded via Webflow’s Assets panel, and the URL must be correct.
- Make sure it's a small image or icon, optimized for inline use.
5. Check for Conflicting Styles
- Webflow’s default classes or higher-specificity styles may override yours.
- Use specific custom classes rather than relying on tag selectors.
- Check Flexbox or Grid settings — sometimes layout display types can interfere with list behavior.
6. Test in Published Site
- Webflow’s Designer preview may not always reflect custom style scripts correctly.
- Always publish your site and check the live version to validate bullet image rendering.
Summary
To fix your custom image bullet issue in pricing columns: use proper List and List Item elements, apply a class to style bullets via ::before, verify your image URL, and ensure no conflicting styles are overriding your design. Always check the live version after publishing.