2

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">

jgillich
  • 71,459
  • 6
  • 57
  • 85
Derple
  • 865
  • 11
  • 28
  • 2
    Hi, Stuart. Have you seen the FAQ [Can I answer my own question?](https://stackoverflow.com/help/self-answer)? You are already answering your question, but you should create an answer and answer it there instead. – Toothbrush Jun 15 '14 at 18:41
  • how to solve this problem with handling bootstrap on a CDN or with amazon S3? – FlogFR Jul 30 '14 at 15:49

2 Answers2

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.

Derple
  • 865
  • 11
  • 28
  • 1
    You could just link to it by it's relative path, like so: `` – Last1Here Jun 15 '14 at 18:50
  • 2
    Yes, absolutely, as its recognised as local both through `http://domain` and the relative path. I just felt that it good to mention as seems a lot of people have been stumped and may have this as the issue. I myself do not use relative paths too often as i migrate chunks of code from place to place frequently, using full paths seems to prevent other issues for me on occasion, but just happened to introduce this other issue which gladly is fixed now. – Derple Jun 15 '14 at 18:53
0

@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".

Community
  • 1
  • 1
Ghasem
  • 14,455
  • 21
  • 138
  • 171