8

我知道还有很多其他类似的问题，但我的似乎不符合其他问题的任何标准。

我的 Bootstrap 3 字形图标适用于除 Firefox 之外的所有浏览器。在 Firefox 上，它们显示为奇怪的符号。当从 CDN 提供字形图标时，同样的问题是臭名昭著的，但这不是我的问题，因为我使用的是本地托管的字体文件。另外，我已经确保我的文件没有损坏。

这是我的代码。

<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>

字形图标的代码：

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

我已经确保我的文件得到了适当的处理，并确保清除我的缓存。我无法说出我在这里缺少什么。建议？

4

3 回答 3

16

Firefox 有一个严格的设置（this），可以防止您的 HTML 文件从不在根目录中的文件夹访问您的网络字体。这只发生在您在本地工作而不是从服务器上的文件中工作时。在本地开发时，您必须更改 Firefox 中的设置以显示字形图标。

-在您的Firefox地址中打开“about：config”

-然后搜索“security.fileuri.strict_origin_policy”属性并将其从“true”更改为“false”。（当然忽略引号）

于 2013-10-16T17:14:27.987 回答
8

我遇到了这个问题，但是从 CDN 提供引导 css 为我解决了这个问题：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
于 2015-02-28T15:54:14.850 回答
3

我花了一段时间来解决这个问题，我的问题可能与其他问题不同，因为那里有一些流行的答案对我不起作用。那是因为我的问题和解决方案与 Amazon S3 有关。因此，如果您使用的是 S3，请继续阅读。

问题在于 CORS（跨域资源共享）配置。以下是解决方法：

登录到您的 S3 并打开您遇到问题的存储桶。单击“属性”，然后单击“权限”。在下拉菜单中单击“编辑 CORS 配置”。将弹出一个窗口，其中包含如下所示的框中的代码：

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

删除这一行：

<AllowedHeader>Authorization</AllowedHeader>

保存并刷新您的 Firefox 页面。您的图标现在应该出现了！

查看这些链接以获取更多信息，因为它们帮助我解决了这个问题：here和here和here。如果有人可以更深入地了解为什么会这样，请这样做！

于 2014-02-19T04:16:22.043 回答