Why isn't the custom image bullet code working for my bulleted lists within the pricing columns on my Webflow website?
TL;DR
- Use a proper List structure in Webflow with correctly nested List Items.
- Apply specific custom CSS using class selectors and
list-style-imageor background-image styling. - Ensure bullet images are accessible via Webflow’s asset manager and test styles on the published site to bypass Webflow overrides.
Your custom image bullets may not be showing within the pricing columns due to issues with CSS specificity, placement, or unsupported styling within Webflow's Designer. Here’s how to troubleshoot and resolve the issue.
1. Verify List Structure
- Make sure you're using a proper list wrapper: In Webflow, use a List component and nest List Items inside it.
- Each list item should contain a Text Block or Rich Text if you're embedding inline elements.
2. Check Custom CSS Placement
- If you added custom CSS in your Page Settings or Site Settings, make sure it targets the correct class or element:
- Use
.your-class liinstead of justlito increase specificity. - Webflow Designer-supplied classes (like
.pricing-list) should be used in your custom code to ensure styles are applied properly.
3. Use list-style-image or Background Image
- Check if you're using the correct CSS format:
- For custom bullets via CSS:
list-style-image: url("your-bullet-image.png"); - Alternatively, remove bullets and use a custom background image on each List Item, positioning it with padding and
background-position.
4. Ensure Assets Are Published and Accessible
- If the bullet image link is broken or not yet uploaded to Webflow's asset manager, the style won't render.
- Upload the image in Webflow, then copy its hosted URL from the asset settings and reference that in your custom code.
5. Webflow Overrides Default Styles
- Webflow may override list styles within certain components, especially Columns or Flexbox layouts.
- Try adding
!importantto your custom CSS to force it:list-style-image: url("image.png") !important;
6. Browser Support and Preview Mode
- If testing in Designer preview, custom code may not fully render. Publish the site to view final styles in the browser.
- Test on actual devices to ensure it's not a rendering or cache issue.
Summary
To fix custom image bullets in Webflow pricing lists, use a proper list structure, apply targeted and specific CSS with list-style-image or background images, ensure images are accessible via Webflow’s asset URLs, and test on a published site. Be mindful of Webflow’s default styles that may interfere with list customization.