检查它是否为glyphicons-halflings-regular。Woff而不是glyphiconshalflings-regular.woff

在我的情况下，我得到了一个404的glyphicons-halfling -regular。Woff，以及移动浏览器上不可见的象形文字。

看起来woff的MIME类型有些混乱，不同的浏览器接受多种MIME类型，但是W3C说:

application/font-woff

编辑:在测试以下MIME类型的woff作品目前在所有浏览器:

application/x-font-woff

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

application/font-woff2

它看起来像一个UTF字符问题在你的css。只需更新您的引导css文件与新的。

例如，确保你没有过度指定字体族

*{font-family: Verdana;}

将从I元素中删除halflings字体。

我也有同样的问题，除了在本页的隐藏评论中，我找不到任何关于它的信息。根据Chrome浏览器，我的字体文件加载正常，但图标显示不正常。我把这个作为答案，希望能帮助到其他人。

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

对我来说有效的是替换以下路线:

@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');
}

to

@font-face {
  font-family: 'Glyphicons Halflings';

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