twitter-bootstrap Bootstrap glyphicons Firefox 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19085942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Boootstrap glyphicons Firefox issues
提问by Thought Space Designs
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.
我的 Bootstrap 3 glyphicons 适用于除 Firefox 之外的所有浏览器。在 Firefox 上，它们显示为奇怪的符号。当从 CDN 提供字形时，同样的问题是臭名昭著的，但这不是我的问题，因为我使用的是本地托管的字体文件。另外，我已经确保我的文件没有损坏。
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?
我已经确保我的文件得到适当的处理，并确保清除我的缓存。我不知道我在这里错过了什么。建议？
采纳答案by Kingsley Ijomah
I had this issue, but serving bootstrap css from CDN solved it for me:
我遇到了这个问题，但是从 CDN 提供 bootstrap css 为我解决了这个问题：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
回答by Damathryx
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.
Firefox 有一个严格的设置（this），可以防止您的 HTML 文件从不在根目录中的文件夹访问您的网络字体。这仅在您在本地工作时发生，而不是在服务器上的文件中发生。在本地开发时，您必须更改 Firefox 中的设置以显示字形。
-open "about:config" in your address in firefox
- 在您的 Firefox 地址中打开“about:config”
-Then search for "security.fileuri.strict_origin_policy" property and change it from "true" to "false". (ignore quotation marks of course)
- 然后搜索“security.fileuri.strict_origin_policy”属性并将其从“true”更改为“false”。（当然忽略引号）
回答by user2498172
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.
我花了一段时间来解决这个问题，我的问题可能与其他问题不同，因为有一些流行的答案对我不起作用。那是因为我的问题和解决方案与 Amazon S3 有关。因此，如果您使用的是 S3，请继续阅读。
The problem is the CORS (Cross-Origin Resource Sharing) configuration. Here's how to solve it:
问题在于 CORS（跨源资源共享）配置。以下是解决方法：
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:
登录到您的 S3 并打开您遇到问题的存储桶。单击“属性”，然后单击“权限”。在下拉菜单中单击“编辑 CORS 配置”。将弹出一个窗口，其中包含如下所示的框中的代码：
<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!
保存并刷新您的 Firefox 页面。您的图标现在应该出现了！
Take a look at these links for more information as they helped me solve this: hereand hereand here. If anyone can offer more insight into why this works, please do!
查看这些链接以获取更多信息，因为它们帮助我解决了这个问题：here、here和here。如果有人可以更深入地了解为什么会这样，请这样做！
