Bootstrap 3无法正确显示glyphicon。

Question

Bootstrap 3无法正确显示glyphicon。

57

我正在从Bootstrap 2.3迁移到Bootstrap 3，一切都运作良好。但是当我尝试添加一些图标时，图标字体无法正确显示。我尝试查看 http://bootply.com/61521 ，只有“ .glyphicon-envelope” 能够正确显示。其他的都显示为“E001”等等。

如何解决这个问题？对于其他浏览器，Glyphicons 可以正常显示，只有火狐浏览器不能正确显示它。

- iSa

字形图标的CSS已经自动包含在Bootply中。 - Carol Skelly

https://dev59.com/13E85IYBdhLWcg3wShWf - ecabuk

https://dev59.com/OmMl5IYBdhLWcg3we283#31522226 - Jo Smo

可能是Bootstrap 3 Glyphicons不起作用的重复问题。 - Mogsdad

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gates · Answer 1

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

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

除此之外，新用户可能会犯的另一个错误是，在从官方网站下载bootstrap zip后，他们倾向于跳过复制字体文件夹到他们的开发设置中。因此，缺少字体文件夹也可能导致此问题

- Divyanshu Jimmy · Answer 2

对我来说，按照bootstrap.css指定的位置放置我的字体文件夹解决了问题。

通常情况下，字体文件夹应该在bootstrap.css文件的父目录中。

我曾经遇到过这个问题，并研究了很多答案。如果在2015年仍然遇到这个问题，那么要么是CSS问题，要么是文件位置不匹配。

这个错误已经被bootstrap解决了。

- trebor1979 · Answer 3

正如其他人所指出的那样，自定义器存在一些问题。

我遇到了字形图标未显示以及导航栏布局问题。

我采用了建议，并从完整的zip文件中上传了字体/覆盖了自定义版本中的字体，这解决了图标问题。

我还拉取了CDN CSS和javascript，而不是使用来自CDN的本地副本。这解决了我的导航栏问题。

因此，在您掌握Bootstrap之前，我建议不要使用自定义版本，因为您可能会得到一些令人沮丧和不必要的结果。

- The_Spirit · Answer 4

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