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.
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!
No comments:
Post a Comment