Icons suddenly showing as empty boxes, squares or plain text instead of the neat little symbols they should be? It’s a common WordPress annoyance, usually caused by an icon font failing to load. Here’s how to track down why and fix it.
What’s actually happening
Icon libraries like Font Awesome work by loading a special font file where each character is an icon. When that font file doesn’t load — because of a broken link, a caching issue or a cross-origin restriction — the browser falls back to showing an empty box or the raw character. So the fix is getting that font file to load reliably.
Clear your caches first
The most common cause is a cached page or stylesheet referencing an old or moved font file. Clear your caching plugin, then hard refresh (Ctrl+F5). A surprising number of “missing icon” problems are just stale caches.
Check for a plugin conflict
Two plugins each loading their own version of an icon library can clash, with one version overriding the other’s icons. Check whether multiple plugins are loading Font Awesome, and if so, disable the duplicate. A browser console error (F12 → Console) mentioning a font file that failed to load points you to the source.
Fix cross-origin (CORS) font loading
If your icons load from a CDN or a subdomain, browsers sometimes block the font for cross-origin reasons. Adding a rule to your .htaccess that allows font files to be loaded across origins resolves this:
<FilesMatch "\.(ttf|otf|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>This tells the server it’s fine to serve those font files to your pages.
Confirm the mixed-content angle
If your site is on HTTPS but the icon font loads over HTTP, browsers block it as mixed content. Make sure the font is referenced over https:// — the same search-and-replace fix that solves general mixed content applies here too.
Re-save and re-check after theme updates
Icons often break after a theme or page-builder update changed how the library loads. After updating, clear caches and re-check. If the update genuinely broke the icon loading, the theme’s support or a newer patch usually addresses it.
Between clearing caches, resolving duplicates and the CORS header, this one nearly always resolves. If a console error points at something server-side, send it to us and we’ll sort it.
