Boootstrap glyphicons Firefox issues

StackOverflow https://stackoverflow.com/questions/19085942

Question

I know that there's many other problems similar to this, but mine doesn't seem to meet any of the criteria of the other issues.

My Bootstrap 3 glyphicons are working for every browser except Firefox. On Firefox, they display as weird symbols. This same problem is notorious when serving the glyphicons from a CDN, but that's not my issue as I'm using locally hosted font files. Also, I've already ensured that my files aren't corrupted.

Here's 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>

The code for the glyphicon:

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

I've already ensured that my files are addressed appropriately and made sure to clear my cache. I can't tell what I'm missing here. Suggestions?

Was it helpful?

Solution 2

I had this issue, but serving bootstrap css from CDN solved it for me:

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

OTHER TIPS

Firefox has a strict setting(this) that prevents your HTML file from accessing your web fonts from folders not on the root. 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". (ignore quotation marks of course)

It took me awhile to solve this one and my problem might be different from others as there are popular answers out there that just didn't work for me. That's because my problem and solution has to do with Amazon S3. So if you are using S3, read on.

The problem is the CORS (Cross-Origin Resource Sharing) configuration. Here's how to solve it:

Sign in to your S3 and open the bucket you are having the problem with. Click 'Properties' and then 'Permissions.' In the drop down click 'edit CORS configuration.' A window will pop up with code in a box 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 your Firefox page. Your icons should now appear!

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top