CSS Glyphs not working with MaxCDN or caching services

Question

I am using the CSS glyphs that are included in the template next to the menu items. Using these, a small icon can appear next to the name, and an arrow will appear next to it if it contains multiple items.

However, whenever I install a caching plugin or MaxCDN (I just tested it by turning on MaxCDN), they quit working in Firefox and IE 9-11 (I think in non-webkit based browsers). Oddly, they work with these plugins not activated.

Firefox Before:

.icon-envelope:before {
content: "";
}

After:

.icon-envelope:before {
content: "";
}

Chrome Before:

.icon-envelope:before {
content: "\f0e0";
}

After:

.icon-envelope:before {
content: "\f003";
}

These compare what the browsers show in the developer inspect tools before and after the application of MaxCDN. These glyphs are through Font-Awesome, but the joomla template doesn't directly use the bootstrap.css (so I don't think using bootstrapCDN will help).

Answer 1

This is most likely due to CORS. MaxCDN has an article on how to add a Access-Control-Allow-Origin header to HTTPD, Nginx & IIS here: http://support.maxcdn.com/howto/use-cdn-with-webfonts/

Firefox blocks webfonts from rendering if the following http header is missing:

Access-Control-Allow-Origin "*"

Hope that helps.