Question

我正在从bootstrap 2.3迁移到bootstrap 3，一切正常。但是当我尝试添加一些图标时，图标字体无法正常显示。我试图在这里查看http://bootply.com/61521并且只显示'.glyphicon-envelope'。其他人则表现出'E001'等等。

我怎样才能解决这个问题？

对于其他浏览器，正确显示glyphicons，只有firefox无法正常显示。

Answer 1

您是否选择了Bootstrap的自定义版本？存在一个问题，即自定义包中包含的字体文件已损坏（请参阅https://github.com/twbs/bootstrap/issues/9925）。如果您不想使用CDN，则必须手动下载并用下载的字体替换自己的字体：

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

之后尝试强力重装（CTRL + F5），希望有所帮助。

Answer 2

图标和CSS现在已从引导程序中分离出来。这是一个来自另一个stackoverflow答案的小提琴

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");

http://jsfiddle.net/aQrPd/1/

Bootstrap 3 Glyphicons CDN

Answer 3

好的，上面没有回答我的问题。我有与bootstrap css和js文件夹相同位置的fonts文件夹（例如/ theme / bootstrap3 / ..），但是它在根目录中寻找字体文件夹（例如/ fonts / glyph .. .woff）< / p>

我的解决方案是将@ icon-font-path变量设置为正确的相对路径：

例如@ icon-font-path：“fonts /”;

Answer 4

这是对我有用的修复方法。 Firefox有一个文件原始策略导致此问题。要修复，请执行以下步骤：

在firefox中打开about：config
查找security.fileuri.strict_origin_policy属性并将其从“true”更改为“false”。
Voial！你很高兴！

详细说明： http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

使用file：/// protocol

Answer 5

使用本地apache服务器时遇到了同样的问题。这解决了我的问题：

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

对于Amazon s3，您需要编辑CORS配置：

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

Answer 6

首先，我尝试使用zip文件以“官方”方式安装glyphicons字体。我不能这样做。

这是我的逐步解决方案：

转到Bootstrap的网页，然后转到“组件” 部分。
打开浏览器控制台。在Chrome中，按Ctrl + Shift + C。
在参考资料部分，您将在Frames / getbootstrap.com / Fonts内部找到实际运行glyphicons的字体。它的建议使用私有模式来逃避缓存。
网址为字体文件（右键单击资源列表中显示的文件），将其复制到新选项卡中，然后按ENTER键。这将下载字体文件。
再次复制选项卡中的URL并更改字体你喜欢的扩展到eot，ttf，svg或woff。

但是，为了更容易访问，这是woff文件的链接。

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

Answer 7

我最终切换到Font-Awesome Icons。如果不是更好的话，它们也同样好，你需要做的就是链接字体，快乐的日子。

Answer 8

确保包含字体名称的文件夹的名称是“fonts”而不是“font”

Answer 9

你可以使用这样的标签：

<i class="fa fa-edit"></i>

Answer 10

以防万一：

例如，我刚试过$('.entry-content img').each(function (i, o) { if ($(this).outerWidth() > 1080) { $(this).css({"width": "100%", "height":"auto"}); } }); 一小时后我意识到这个图标不包含在bootstrap包中！虽然enveloppe图标工作正常..

希望这有帮助

Answer 11

正如其他人所说，定制器存在一些问题。

我遇到了没有显示字形的麻烦，以及导航栏布局的问题。

我使用了这个建议并从完整的zip上传了字体/覆盖了自定义版本中的字体并修复了图标问题。

我还从CDN中提取了CDN CSS和javascript而不是我的本地副本。这解决了我的导航栏问题。

所以我建议你直到掌握Bootstrap，不要使用自定义版本，因为你可能会得到一些令人沮丧的，不想要的结果。

Answer 12

根据bootstrap.css中指定的位置放置 fonts 文件夹解决了问题

大多数 fonts 文件夹应位于bootstrap.css文件的父目录中。

我遇到了这个问题，并研究了很多答案，如果还有人在2015年面临这个问题，那么它的CSS问题或文件的位置不匹配。

该错误已由bootstrap解决

Answer 13

这是支持上述答案的官方文档。

更改图标字体位置 Bootstrap假设图标字体文件将位于../fonts/目录中，相对于已编译的CSS文件。移动或重命名这些字体文件意味着以三种方式之一更新CSS：更改源Less文件中的@ icon-font-path和/或@ icon-font-name变量。利用Less编译器提供的相对URL选项。更改已编译CSS中的url（）路径。使用最适合您特定开发设置的选项。

除了这个错误之外，新用户会在从官方网站下载引导zip之后做错。他们倾向于跳过fonts文件夹以便在他们的开发设置中进行复制。 所以缺少字体文件夹也会导致此问题

Answer 14

尝试使用CDN
尝试设置Access-Control-Allow-Origin HTTP标头

Bootstrap 3无法正确显示glyphicon

14 个答案: