The Kadence Blocks infobox block combines an icon or image with a title and description to highlight key information, services, or features. Designers can choose from hundreds of icons or upload custom images, and the preview in the Gutenberg editor shows the icon correctly. However, when viewing the page on the live frontend, the icon may appear as an empty square, a missing character, or nothing at all, leaving the infobox looking incomplete and unprofessional.
This problem can be particularly frustrating because the rest of the infobox content (title, description, button) displays correctly, but the visual element that draws attention to the information is missing. The icon may have worked previously and suddenly stopped working after a plugin update, or it may work on some pages but not on others. Understanding why Kadence Blocks infobox icons fail to display is essential for creating visually consistent websites.
The most common cause of this problem is that the icon library (typically Font Awesome or a similar icon font) is not loading on the frontend, either because it has been deregistered by another plugin or because a caching plugin is blocking it. Another cause is that a security plugin or browser extension is blocking the icon font from loading due to CORS policy or content security policy restrictions.
Why Kadence Blocks infobox icons fail to display on the frontend
Kadence Blocks uses icon fonts (typically Font Awesome) to display the icons in infobox blocks. Icon fonts are loaded as external CSS and font files that define how each icon character should be rendered. If these files are not loaded on the frontend, the browser does not know how to display the icon characters, and they appear as empty squares or missing character symbols (often a question mark inside a diamond). The editor loads these files through a different mechanism, which explains why icons appear in the editor but not on the frontend.
Another common cause is that another plugin or the theme is loading a different version of the icon font that conflicts with Kadence Blocks. If the theme loads Font Awesome 5 while Kadence Blocks expects Font Awesome 4, the icon classes may not match, and the wrong character may be displayed. Similarly, if another plugin deregisters the icon font to load its own version, Kadence Blocks may not have access to the icons at all.
Caching plugins that combine or minify CSS files can also break icon fonts by moving the font-face declarations to different locations or changing the relative paths to the font files. When the font files cannot be found, the browser falls back to the default system font, which does not have the icon characters, resulting in missing icons. Additionally, some CDN configurations may block font files due to CORS policy restrictions.
How to check if icon fonts are loading on the frontend
Open the frontend of the website in a web browser and open the developer tools by pressing F12. Navigate to the Network tab and reload the page, then look for requests to font files with extensions like .woff, .woff2, .ttf, or .otf. Also look for CSS files that contain “font-awesome” or “kadence-icons” in their names. If these files are missing or return 404 errors, the icon fonts are not loading. Check the Console tab for CORS errors or content security policy violations that might be blocking font files from loading.
Step by step guide to fixing Kadence Blocks infobox icons
Follow these steps in order to restore missing infobox icons on the Kadence Blocks frontend. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Disable all optimization plugins temporarily to test if they block icon fonts
- Check that the icon font CSS files are loading in the network tab
- Add CORS headers for font files if using a CDN or separate domain
- Check the browser console for CORS or content security policy errors
- Regenerate Kadence Blocks assets from the Kadence settings panel if available
- Temporarily deactivate all other plugins to test for icon library conflicts
- Switch to a default WordPress theme to test if the theme deregisters icon fonts
- Update Kadence Blocks to the latest version available from the WordPress repository
- Replace the icon font with a custom SVG image as a temporary workaround
How to add CORS headers for icon font files on Cloudflare
In Cloudflare dashboard, navigate to Rules → CORS and create a new CORS rule for font files. Add the following settings: “URI Path” contains “.woff” or “.woff2” or “.ttf”, “Allowed Origins” set to “*” or your specific domain, and “Allowed Methods” set to “GET, HEAD, OPTIONS”. Save the rule and purge the CDN cache. For other CDNs like BunnyCDN or KeyCDN, look for CORS settings in their configuration panels and add similar rules to allow cross-origin font requests.
Kadence Blocks infobox troubleshooting reference table
Here is a reference table for diagnosing infobox icon problems in Kadence Blocks based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Icon shows as empty square or missing character | Icon font not loading on frontend | Check network tab for font file 404 errors | Icon shows as wrong character (different icon) | Icon library version conflict | Check if theme loads different Font Awesome version | Icon works in editor but not on frontend | Caching or optimization plugin issue | Clear caches and disable CSS/JS optimization | Icon appears then disappears on page load | Flash of missing icon before font loads | Preload icon font or use SVG icons instead |
|---|
For more information about Kadence Blocks infobox settings, visit the Kadence Blocks page on wpwizzy.com.
Preventing Kadence Blocks infobox icon problems in the future
Consider using SVG icons instead of icon fonts when possible, as SVG icons do not suffer from font loading issues and are more reliable across different devices and browsers. If using icon fonts, preload the font files to ensure they load early in the page rendering process, and add CORS headers to CDN configurations to prevent cross-origin blocking. Exclude Kadence Blocks icon CSS files from minification and combination in caching plugins to prevent path breakage.
Keep Kadence Blocks and all other plugins updated to their latest versions on a regular schedule, and clear all caches after making changes to icon settings. Test infobox icons on the frontend after every plugin update to catch problems early, and use a staging website to test major changes before applying them to the live production site. Document any custom exclusions added to caching plugins for icon fonts for future reference.