Q:

CSS Glyphs not working with MaxCDN or caching services

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).

A:

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.

