Bootstrap 3 Glyphicons无效

Question

Bootstrap 3 Glyphicons无效我下载了bootstrap 3.0，无法让glyphicons工作。我收到某种“E003”错误。任何想法为什么会这样？我在本地和网上尝试过，我仍然遇到同样的问题。

Answer 1

我遇到了同样的问题，除了本页隐藏的评论外，找不到任何相关信息。根据Chrome，我的字体文件加载得很好，但图标显示不正常。我正在给这个答案，所以它有望帮助别人。

我从Bootstrap 3的自定义工具下载的字体文件出了问题。要获取正确的字体，请转到Bootstrap主页并下载完整的.zip文件。从那里提取四个字体文件到你的字体目录，一切都应该工作。

Answer 2

字体文件未正确加载。检查文件是否在预期位置。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

如Daniel所示，它也可能是一个mimetype问题。Chrome的开发工具在网络标签中显示已下载的字体：

Answer 3

在我的情况下，我获得了404 字形 - 半身像 - regular.woff，以及移动浏览器上的非可见字形。

看起来对于woff的MIME类型存在一些混淆，不同浏览器接受多种MIME类型，但W3C说：

application/font-woff

编辑：测试以下MIME类型后woff适用于当前所有浏览器：

application/x-font-woff

编辑：此时最新版本的Bootstrap（3.3.5）使用与.woff初始结果相同的.woff2字体，W3C仍然定义规范，但目前MIME类型似乎是：

application/font-woff2