This new theme utilizes FontAwesome, an iconic font, to adapt to new locations and devices more easily. For example, the search magnifying glass, the RSS feed icon, and a few other icons around the site come from FontAwesome.
I use Chrome as my default browser and all looked well and good there. When I was checking over the site in other browsers like Firefox and IE I noticed that the icons were not showing up. They were replaced with a box containing F002 and other characters. (Zoomed in to make it a little easier to see.)
Inspecting the element in the Firefox console showed the following error trying to access the font file (the FontAwesome .eot, .ttf, .otf, or .woff): bad URI or cross-site access not allowed
Testing things out, I narrowed the problem down to when I enabled the caching plugin, specifically the CDN component. I am using Amazon Web Services CloudFront as my CDN with a direct origin-pull connection. From everything I could find online, the problem came from Firefox having strict settings and CloudFront not being able to be configured with CORS. One of the first suggested solutions I found was an update to the problem finding that Amazon had enabled CORS on their S3 buckets. I didn’t want to complicate my setup by including S3 in the equation, so I kept looking.
I tried excluding the various font formats from the CDN through my caching plugin but apparently the way it was being called, the exclusion had no effect. I found that NetDNA provides a free Bootstrap CDN which includes serving Font Awesome. Their page provides you the information to include their hosted CSS file. Unfortunately, including it in my site’s header did not solve the problem. I dissected their indicated CSS file to find the path to the font files. I then hard-coded those paths into my original CSS file instead of pulling a relative path on my CDN. The path for the .eot file, for example: http://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot
This ended up working well across browsers and did not have the cache header problem that CloudFront did. Unfortunately, with the CSS file cached on CloudFront, I would have to invalidate the file before the change could take effect. I would also have to keep up with BootstrapCDN updates in the future. While I was waiting for the file to invalidate, I found another solution in a tab to StackOverflow I had opened earlier. There, user Styu provided the following code to add to your .htaccess file.
[text]
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
[/text]
It solved the problem right away. After CloudFront finished invalidating the CSS file, I removed this fix and tested both individually to confirm they each worked. Right now, I have both solutions in place but plan on going down to just the .htaccess solution when the next theme update replaces my changes using the BootstrapCDN font files.
WordPress Plugin
If you would like to use Font Awesome within WordPress but your theme doesn’t include it, you can use the WordPress plugin AwesomePress to make Font Awesome available.
With this plugin, you can access the full set of icons within the font using HTML, PHP template codes, and shortcodes. Then, you would be able to accomplish something like this:
and many more.