Bootstrap图标在Firefox上的问题

Question

Bootstrap图标在Firefox上的问题

8

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

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

The code for the glyphicon:

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

我已经确保我的文件被适当地命名，并清除了缓存。但我无法确定我在这里缺少什么。有什么建议吗？

- Thought Space Designs

3个回答

8

我曾经遇到过这个问题，但我从CDN获取bootstrap的css文件解决了它：

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

- Kingsley Ijomah

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页面。现在你的图标应该会出现！

查看以下链接以获取更多信息，因为它们帮助我解决了这个问题：这里、这里和这里。如果有人能提供更多关于为什么这样做可以起作用的见解，请务必告诉我们！

- user2498172

我没有使用S3，所以这绝对不是我的配置问题。谢谢！ - Thought Space Designs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Damathryx · Accepted Answer

Firefox有一项严格设置（此处），防止您的HTML文件从根目录外的文件夹访问您的Web字体。这仅在本地工作时发生，而不是从服务器上的文件。您必须更改Firefox中的设置才能在本地开发时显示字形图标。

-在Firefox中地址栏输入"about:config"

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