I ran into an issue with the Monarch plugin from Elegant Themes over the weekend where my icons would not display in Internet Exploder or Firefox. Being the diligent developer that I am, I need everything to look the same (or at least acceptable) in each and every browsing situation.
Working primarily in Google Chrome, I missed the display issue for a few hours until I decided to test things in IE and Firefox. To my disappointment, the icon fonts were not displaying correctly.
After scouring the Monarch support forums with a few searches, I ran into a solution in the form of a code snippet that needs to be added to the htaccess file. Although it’s not specifically geared toward the issue I was having, this post from David Walsh was the fix I needed.
Here’s what’s happening: The icon font used in the Monarch plugin is delivered over a CDN. Icon Fonts used this way don’t work reliably in IE or Firefox. Adding the following code snippet to the htaccess file will correct the issue. (At least it worked for me.)
Add the following snippet to the bottom of your htaccess file:
<FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
*Please note: This is the code required for a typical Apache setup. If you’re using NGINX, the code is different, but it’s included in the post at the link I shared above.
Let me know if you’re having similar issues or if this fix does not do the trick for you.
