Question

我知道还有许多与此类似的问题，但我似乎没有达到其他问题的任何标准。

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

这是我的代码。

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

glyphicon的代码：

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

我已经确保我的文件得到了适当的处理，并确保清除我的缓存。我不知道我在这里失踪了什么。建议？

Answer 1

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

- 在你的firefox地址中打开“about：config”

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

Answer 2

我有这个问题，但是从CDN服务bootstrap css为我解决了这个问题：

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

Answer 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。如果有人能够提供更多有关其工作原理的见解，请做！

Bootstrap glyphicons Firefox问题

3 个答案: