Why do the icons I added in Webflow designer not show up in view mode on my site?
TL;DR
- Ensure icons are embedded correctly (SVG or font-based) and that any required font libraries (like Font Awesome) are properly linked in Project Settings > Custom Code.
- Republish the site to the correct domain, clear caches, and use browser developer tools to check for missing assets or CSS conflicts.
If your icons show in Webflow Designer but don’t appear on the live site, the issue is likely related to asset type, font library loading, or publishing errors.
1. Check Icon Type and Method Used
- If you used SVG icons, make sure they are embedded correctly—not background images or external links that might be blocked.
- If you used icons from a font library (e.g., Font Awesome), verify that the font library is properly loaded.
- If you pasted inline SVGs from another source, they may reference external styles that aren’t available.
2. Verify Font Library Integration
- Go to Project Settings > Custom Code.
- Check that any required CDN link or script tag for the icon library (e.g., Font Awesome or Material Icons) is properly placed in the Head or Footer sections.
- If you added the icons using a class like
<i class="fas fa-check"></i>, the proper CSS file must be loaded from the icon provider.
3. Confirm Publish to Live Site
- After editing in Designer, click Publish and ensure you selected the correct domain(s).
- View the published URL (not just the Designer preview) to confirm whether icons appear.
4. Inspect with Developer Tools
- Right-click your site and choose Inspect in your browser.
- Look for missing file errors in the Console tab (e.g., 404 errors for icon fonts or scripts).
- Check if the icons are present in the DOM but invisible due to missing styling.
5. Clear CDN and Browser Caches
- Try a hard refresh (Cmd + Shift + R or Ctrl + Shift + R).
- If assets were recently changed, Webflow’s CDN may still be serving an old version. Republishing can fix this.
6. Check for Style Conflicts
- If the icons are present in the DOM but not visible, inspect their CSS properties.
- Look for rules like
display: none,opacity: 0, or incorrectcolor.
Summary
If icons aren’t showing on the published site, it’s usually due to a missing font library, incorrect embedding method, or CSS conflicts. Double-check your library integration, republish your site, and use browser dev tools to find visibility or loading issues.
