Firefox 中 bootstrap 3.3.5 中的字形图标存在一些问题

Posted 2023-03-07

【中文标题】Firefox 中 bootstrap 3.3.5 中的字形图标存在一些问题

【英文标题】：Having some problems with glyphicons from bootstrap 3.3.5 in Firefox

【发布时间】：2015-12-03 03:48:22

【问题描述】：

我无法找到问题的答案。 Glyphicons 仍然无法在 Firefox 中使用。仅限火狐。

例如：<li class="active"><a href="#"><span class="glyphicon glyphicon-search"></span> Home</a></li>

在我的 .css 文件中：

@font-face 
  font-family: 'Glyphicons 半身人';

src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') 格式('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') 格式( 'woff2'), url('../fonts/glyphicons-halflings-regular.woff') 格式('woff'), url('../fonts/glyphicons-halflings-regular.ttf') 格式('truetype '), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 格式('svg');

【问题讨论】：

我在 Firefox 中的字形图标从来没有遇到过任何问题。为什么不下载文件并将其存储在您的文件夹中而不是使用 src ？ github.com/twbs/bootstrap/archive/v3.0.0.zip

我不是专家，但我不认为这是使用它们的常用方法？此外，这个问题只发生在 Firefox 上。为什么？

很奇怪，我刚刚在我的 Firefox 中尝试过你的代码，它可以工作。您是否尝试过在 jsfiddle 中查看它是否有效？ jsfiddle.net/ztm1cbpw

我刚刚测试过。同样的问题。

您确定拥有所需的 CDN 吗？我刚刚将所需的 css 和 js 文件添加到您发布的 jsfiddle 中，并且可以正常工作。即https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css和https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.jsjsfiddle.net/d7na1qb8/1

【参考方案1】：

根据您针对该问题发布的 jsfiddle，您似乎缺少所需的 CDN。在我包含这些之后：

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script

它displayed 字形图标。确保您将这些内容包含在您的页面中，并且它应该可以工作。 :)

【讨论】：

它有效。谢谢。但我不明白为什么。我已经在文件中写了这一行：

Bootstrap 就是这么神秘。如果出现问题，请先确保 CDN 链接正确。我自己发现了很多次:)。很高兴它现在可以工作了！你说它在其他浏览器中也能用吗？