WordPress迁移问题：Font Awesome图标在多浏览器无法显示

Hey Patrick, let's work through this frustrating icon problem—since it works in Edge but fails on Chrome, Firefox, and Opera, we're looking at cross-browser-specific issues like caching, resource path mismatches, or CORS restrictions that Edge handles more leniently. Here's a step-by-step breakdown of fixes to try:

1. Diagnose Resource Loading Errors First #

Fire up Chrome or Firefox's DevTools (press F12), head to the Console and Network tabs to check for:

• 404 errors for Font Awesome font files (.woff2, .woff, .ttf): This means the browser is looking for fonts in the wrong path (likely your old domain).
• CORS-related error messages: These indicate the browser is blocking font resources from cross-domain sources.

2. Double-Check Path Replacements (Beyond Better Search Replace) #

While Better Search Replace is great, it might miss serialized data in theme options or hidden settings:

• Verify your WP_HOME and WP_SITEURL constants in wp-config.php are set to your new subdomain (http://www.thetrekkr.pd-design.at).
• Use WP-CLI for a more thorough database replacement (this handles serialized data better):

  wp search-replace 'http://www.thetrekkr.com' 'http://www.thetrekkr.pd-design.at' --skip-columns=guid
  

  The --skip-columns=guid flag prevents breaking your site's RSS feeds.
• Check Avada's theme settings directly: Go to Avada > Theme Options > Icon Options and confirm no hardcoded old domain paths exist in font loading settings.

3. Purge All Layers of Cache #

Edge might be holding onto cached working resources, while other browsers have stale, broken cached data:

• Hard-refresh your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to bypass local cache.
• Clear any WordPress caching plugins (e.g., WP Rocket, W3 Total Cache) and disable them temporarily to test.
• If you're using server-side caching (Nginx, Apache) or a CDN, purge those caches too.

4. Fix CORS Restrictions for Fonts #

Browsers (except Edge, in some cases) block cross-domain font requests by default. Add CORS headers to your server configuration:

For Apache (edit .htaccess): #

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

For Nginx (edit your server block config): #

location ~* \.(ttf|otf|eot|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

After adding these, restart your server to apply changes.

5. Verify Avada's Font Awesome Integration #

Avada has its own built-in Font Awesome setup—make sure it's configured correctly for your new server:

• Go to Avada > Theme Options > Icon Options and check if "Load Font Awesome" is set to Local or CDN:
  • If Local: Confirm the font files exist in /wp-content/themes/Avada/assets/fonts/ and have correct permissions (755 for files, 755 for directories).
  • If CDN: Ensure the CDN URL isn't pointing to your old domain, and that the CDN allows cross-origin requests.

6. Check for Mixed Content Issues #

If your new subdomain uses HTTPS but some resources are still loading over HTTP, browsers will block them:

• Go to Settings > General in WordPress and ensure both "WordPress Address (URL)" and "Site Address (URL)" use the correct protocol (HTTP or HTTPS) for your subdomain.
• Use DevTools' Console to look for "Mixed Content" warnings—these will point to resources still using the old domain/protocol.

内容的提问来源于stack exchange，提问作者Patrick D.