Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
670 views
in Technique[技术] by (71.8m points)

twitter bootstrap - Boootstrap glyphicons Firefox issues

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...