Wednesday 28 January 2015

Glyphicon frustration

One of those "banging my head against a brick wall" days at the keyboard.
The problem, I was implementing a boostrap carousel which decorates the internal links with glyphicons. Glyphicons are a woff font type, referred to by the CSS. 
When viewed using Chrome or Firefox, the glyphicons were not diplaying properly, but being replaced by standard characters. (Gnome's own browser showed the glyphicons correctly, proving that my resources were correctly linked to etc..)







When I googled such terms as "glyphicons not displaying correctly" I got a tonne of hits. It turns out that there are a few reasons why these delicate little icons are not displayed. This stackoverflow question shows a variety of fixes, but none of the solutions there made any difference to my situation.
So my issue was not a missing fonts folder, file permissions, mime types etc... My problem was down to the fact that my apache web server I was serving the css from a subdomain of my site, and chrome and firefox have recently become picky about this if the server doesn't specifically allow it.
I found this out by looking at the Chrome Browser web developer extension (network -> console).


Font from origin 'http://static.highlandbrass.org' has been blocked from loading
by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource. 
Origin 'http://highlandbrass.org' is therefore not allowed access.









There are numerous ways to fix this problem, but for me the cleanest was to enable mod_headers for apache2, then tweak the conf file for the site.


sudo a2enmod headers


Then edit the conf file for my site /etc/apache2/sites-enabled/highlandbrass.conf

<VirtualHost>  # for static.highlandbrass.org
       Header add Access-Control-Allow-Origin: http://highlandbrass.org
</VirtualHost>


Reload the server


sudo service apache2 reload


Job Done!