我理解图标字体只是字体,你可以通过调用他们的类名称,但如何图标字体工作得到图标?
我试过检查在Chrome中加载的相关图标字体资源,以查看图标字体如何显示图标(与一般字体相比),但我还没有能够弄清楚这是如何发生的。
我也没有成功找到资源,如何做这个“图标字体技术”,即使有负载的icon fonts available.还有一些资源显示图标字体如何可能是@L_301_1@,但没有人似乎是共享或写关于这是怎么做的!
解决方法
Glyphicons是
images而不是字体。所有图标都在sprite图像(也可以作为单独的图像)中找到,并且它们被添加到定位的背景图像元素:
实际字体图标(例如FontAwesome)涉及下载特定字体并利用内容属性,例如:
@font-face { ... src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); ... } .icon-beer:before { content: "\f0fc"; }
作为内容属性isn’t supported在旧版的浏览器,这些也利用images。
这里有一个完全原始的FontAwesome用作字体,翻转的例子; ( – 你可能不能看到这个!)到救护车:http://jsfiddle.net/GWqcF/2