Bootstrap 3无法正确显示glyphicon

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)

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

例如@ icon-font-path:"fonts /";

Answer 4

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

1. 在Firefox中打开about:config
2. 找到security.fileuri.strict_origin_policy属性并将其从"true"更改为"false".
3. 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字体.我不能这样做.

这是我的逐步解决方案:

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

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

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