In this post: missing Font Awesome icons due to missing CDN configuration.
I have a WordPress blog that uses MaxCDN, W3 Total Cache, and the Mesmerize PRO theme by Extend Themes which includes Font Awesome icons.
After installing and activating the theme on my website the Font Awesome icons appeared as boxes:
And I could see these (canceled) errors in the Network tab:
The referrer is
https://cdn1-mycompany.netdna-ssl.com/wp-content/themes/mesmerize-pro/assets/font-awesome/font-awesome.min.css?ver=1.0.221
That referrer, cdn1-mycompany.netdna-ssl.com, isn’t allowed to serve this file. But there’s an easy fix: you can whitelist the CDN itself in the CDN.
The fix: whitelist the CDN itself
In MaxCDN, go to Pull Zones > Security > Whitelist.
You might already have yourdomain.com in here. What you need to add is the domain your CDN files are pulled from.
In my case, that was a domain that took the form of cdn1-mydomain.netdna-ssl.com, but you can find out what yours is by looking in the Network tab while you try to load your site. Look for a red-colored error message and open the Headers.
Anyway, the fix is as easy as adding the domain to this list of whitelisted domains and waiting a few minutes (for me it was about 10 minutes). Reload your website and the Font Awesome icons should now appear.
Note: You will probably need to Purge All Caches, too, once the time has passed to actually see the change in your browser (I use the dropdown in the WP toolbar).
My W3 Total Cache settings
(Just in case it’s useful to someone else trying to debug this problem)
My W3 Total Cache settings are set to upload .css, .tff, .otf, .woff, and .woff2 files.
Provided again as text so you can copy/paste.
wp-includes file types to upload:
*.css;*.js;*.gif;*.png;*.jpg;*.xml
Theme file types to upload:
*.css;*.js;*.gif;*.png;*.jpg;*.ico;*.tff;*.otf;*.woff;*.woff2
This is a pretty specific configuration issue but hopefully it’ll help someone else out there!