Boootstrap glyphicons Firefox issues

firefox twitter-bootstrap glyphicons
Thought Space Designs picture Thought Space Designs · Sep 30, 2013 · Viewed 11.3k times · Source

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?

Answer

Damathryx picture Damathryx · Oct 16, 2013

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)

Related questions

Jquery StopPropagation not working in firefox

I have this code working on Safari and Chrome , but not in Firefox . Is firefox having a problem with StopPropagation() ? $(function() { // Setup drop down menu $('.dropdown-toggle').dropdown(); // Fix input element click problem $('.login-menu form').click(function(e) { alert(…

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
How to manually send HTTP POST requests from Firefox or Chrome browser?

I want to test some URLs on a web application I'm working on. For that I would like to manually create HTTP POST requests (meaning I can add whatever parameters I like). Is there any extension or functionality in Chrome …

Read More