Bootstrap(3.1.1) Glyphicons not working in firefox

Question

I stumbled across an issue with Bootstrap Glyphicons not working with Firefox but working with other browsers faultlessly.

Q:How to make Glyphicons from Bootstrap 3.1.1 work with firefox?

---

(I answered this myself and this was part of the original post) When i sought information as to what might be causing this issue there are only a few articles that did not solve my issue focusing mainly on older versions and not explaining the required fix.

I then after some time worked out that by solely removing the 'www' from the <link href='www.domain.co.uk'> to the bootstrap.css the glyphicons began working within Firefox as well.

This appears to be due to the following error: Cross-Origin Request Blocked:

I thought perhaps this worth sharing as seems there has been a fair number of people with similar issues as myself without there being any articles covering this method of fix.

Change <link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">

to

This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">

Answer 1

The issue is the following error: Cross-Origin Request Blocked:

I fixed this by removing the www from the <link href='http://www.domain.co.uk'>

Change <link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">

to

This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">

This allows the Glyphicons to work on all browsers including firefox.

Answer 2

@Damathryx solution for this issue is the real solution for working locally:

This only happens when you work locally and not from files on a server. You have to change a setting in Firefox to display the glyphicons when you develop locally.

-open about:config in your address in Firefox

-Then search for security.fileuri.strict_origin_policy property and change it from "true" to "false".