Geek Answers Handbook

Problems with Boopstrap glyphicons Firefox

I know that there are many other problems like this, but mine does not seem to meet any of the criteria for the other problems.

My Bootstrap 3 glyphicons work for every browser except Firefox. In Firefox, they appear as strange characters. The same problem is known when serving glyphics from CDN, but this is not my problem, because I use locally hosted font files. In addition, I have already made sure that my files are not corrupted.

Here is my code.

<head> <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/bootstrap-style.css" /> <link rel="stylesheet" type="text/css" media="all" href="/assets/css/style.css" /> </head>

Code for glyphicon:

 <span class="glyphicon glyphicon-list-alt section-icon"></span>

I have already made sure that my files are addressed properly and will definitely clear the cache. I can’t say what I am missing here. Suggestions?

+8
firefox twitter-bootstrap glyphicons
source share
3 answers

I had this problem, but loading bootstrap css from the CDN resolved this for me:

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+8
source share

Firefox has a strict ( this ) setting that prevents your HTML file from accessing your web fonts from folders, rather than to the root. This only happens when you are working locally, and not from files on the server. You have to change the setting in Firefox to display glyphics in local development.

-open "about: config" in your address in firefox

-After searching for the property "security.fileuri.strict_origin_policy" and change it from "true" to "false". (of course ignore quotes)

+15
source share

It took me a while to solve this problem, and my problem may be different from others, as there are popular answers that just don't work for me. This is because my problem and solution is related to Amazon S3. Therefore, if you use S3, read on.

The problem is setting up CORS (Cross-Origin Resource Sharing) resource sharing. Here's how to solve it:

Enter your S3 and open the bucket you encountered. Click Properties, and then Permissions. In the drop-down list, click "change CORS configuration." A window will appear with the code in the field that looks like this:

 <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>

Delete this line:

 <AllowedHeader>Authorization</AllowedHeader>

Save it and refresh the Firefox page. Now your badges will appear!

Take a look at these links for more information, as they helped me solve this problem: here and here and here . If someone can offer more insight into why this works, please do it!

+3
source share

More articles:


All Articles