Bootstrap 3 Glyphicons不起作用

我下载了bootstrap 3.0,无法使用图形工作。 我得到某种“E003”错误。 任何想法为什么发生这种情况? 我在本地和在线都尝试过,但仍然遇到同样的问题。


我遇到同样的问题,除了在此页面的隐藏评论中找不到任何有关它的信息。 根据Chrome我的字体文件加载得很好,但图标显示不正确。 我正在做这个答案,所以它会希望帮助别人。

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


请注意读者:请务必阅读@ user2261073的评论和@ Jeff的关于定制器中的错误的答案。 这可能是你的问题的原因。


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

@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的开发工具在网络标签中显示下载的字体:


在我的情况下,我在移动浏览器上获得了404的glyphicons-halflings-regular.woff和不可见的glyphicons。

看起来对于woff的MIME类型存在一些混淆,不止一种MIME类型被不同的浏览器接受,但W3C表示:

application/font-woff

编辑:在测试woff的以下MIME类型之后,在当前所有浏览器上都可以使用:

application/x-font-woff

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

application/font-woff2
链接地址: http://www.djcxy.com/p/46977.html

上一篇: Bootstrap 3 Glyphicons are not working

下一篇: branch on all branches