TechCorner HQ · Technical Troubleshooting Guide

Elementor Icons Not Showing: Causes and How to Fix It

By TechCorner HQ Editorial Desk Last reviewed Review standards

Quick Answer

When Elementor icons appear as empty square boxes or fail to load, the issue is typically caused by disabled Font Awesome 4 backward compatibility, stale static asset files, mixed content (HTTP vs. HTTPS) mismatches, or cross-origin resource sharing (CORS) restrictions. To fix this:

Abstract web browser viewport displaying missing icon placeholders and technical network diagnostic elements.
  1. Enable Font Awesome 4 Support: Go to Elementor > Settings > Advanced in your WordPress admin dashboard, set Load Font Awesome 4 Support to Yes, and save changes.
  2. Regenerate CSS & Data: Go to Elementor > Tools > General and click Clear Files & Data (or Regenerate Files & Data).
  3. Purge Caching Layers: Clear your WordPress caching plugins, server-side cache, CDN cache, and local browser cache.

Common Symptoms

When icon fonts or custom icon libraries fail to render, you may notice several distinct symptoms:

  • Small square boxes, empty outlines, or Unicode placeholders appear where social icons, navigation arrows, or widget symbols should be.
  • Icons appear normally inside the Elementor editor interface but disappear on the live published page.
  • Icons break immediately after an SSL certificate installation, site migration, or major plugin update.
  • The browser developer console shows 404 Not Found, Blocked Mixed Content, or Access-Control-Allow-Origin errors for font asset files (such as .woff or .woff2).

If your entire builder interface fails to load rather than just icon assets, see our guide on fixing the Elementor Widget Panel Not Loading error.

Root Causes

1. Font Awesome Version Mismatch

Elementor utilizes Font Awesome 5/6 icon libraries. If your templates, theme, or third-party add-ons still use legacy Font Awesome 4 icon syntax and classes, the browser cannot find the corresponding glyphs unless the Font Awesome 4 support shim script (shim.js) is loaded.

2. Stale Static Asset Generation

Elementor compiles stylesheet rules into external static CSS files. If asset regeneration fails or cached stylesheets retain outdated file paths after a migration or plugin update, the browser requests icon fonts from invalid locations.

3. Mixed Content Protocol Mismatches

If your WordPress site was transitioned from HTTP to HTTPS, but internal asset paths or database references remain hardcoded to HTTP, modern web browsers automatically block insecure font files from loading on secure HTTPS pages.

4. Cross-Origin Resource Sharing (CORS) Blocking

When icon font assets are delivered from an external Content Delivery Network (CDN) or a separate subdomain, the serving server must return proper Access-Control-Allow-Origin headers. Without these headers, browsers enforce same-origin security policies and block font files.

Step-by-Step Troubleshooting and Fixes

Step 1: Enable Font Awesome 4 Support

If legacy icons are showing up as blank squares across your pages, enable the backward-compatibility script:

  1. Log in to your WordPress dashboard.
  2. Navigate to Elementor > Settings.
  3. Click the Advanced tab.
  4. Locate Load Font Awesome 4 Support.
  5. Select Yes from the dropdown menu.
  6. Click Save Changes.

Step 2: Clear Files & Data in Elementor

Forcing Elementor to rebuild its static CSS and data files updates font paths and stylesheet references:

  1. In the WordPress dashboard, navigate to Elementor > Tools.
  2. Under the General tab, locate the Clear Files & Data (or Regenerate Files & Data) option.
  3. Click the button to regenerate the stylesheet files.
  4. Click Save Changes.

Step 3: Purge All System and CDN Caches

Stale cached stylesheets often prevent refreshed font definitions from reaching your browser. Clear caches in this order:

  • WordPress Optimization Plugins: Purge all page and asset caches in plugins like WP Rocket, LiteSpeed Cache, or W3 Total Cache.
  • Server/Host Cache: Clear object caching and edge caching via your hosting control panel.
  • CDN Cache: Purge cache directly through your CDN provider dashboard (such as Cloudflare).
  • Browser Cache: Test using a private or incognito browsing window, or perform a hard refresh (Ctrl + F5 on Windows/Linux or Cmd + Shift + R on macOS).

Step 4: Resolve Mixed Content Protocol Mismatches

Ensure that all site URLs and asset records consistently use secure HTTPS.

Warning: The Replace URL tool modifies internal Elementor data references. Always take a complete database backup before executing site-wide URL replacements.

  1. Navigate to Settings > General in WordPress.
  2. Confirm that both WordPress Address (URL) and Site Address (URL) start with https://.
  3. Navigate to Elementor > Tools and click the Replace URL tab.
  4. Enter your previous HTTP address (e.g., http://example.com) in the old URL field and your HTTPS address (e.g., https://example.com) in the new URL field.
  5. Click Replace URL.
  6. Return to the General tab under Elementor > Tools and click Clear Files & Data.

Step 5: Address CORS and Server Permissions

If the browser developer console displays CORS errors for font files (.woff, .woff2, or .ttf), check your hosting and server setup:

  • Contact your hosting provider or CDN support to ensure the server sends appropriate Access-Control-Allow-Origin headers for static font MIME types.
  • Verify that file and directory permissions in /wp-content/uploads/elementor/ allow the web server to write and update static CSS files.

Verification

To confirm that icon assets are loading properly:

  1. Open your website in an incognito or private browsing window.
  2. Confirm that all icons, navigation arrows, and social symbols render sharply.
  3. Press F12 to open Developer Tools, inspect the Console tab to ensure there are no red Mixed Content or CORS policy errors, and check the Network tab to verify that icon font files return an HTTP 200 OK status.

Sources & References