图标字体：他们是如何工作的？
我明白，图标字体只是字体，你可以通过调用他们的类名来获得图标，但是图标字体是如何工作的？
我已经尝试检查在Chrome中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我一直无法弄清楚这是怎么发生的。
即使有大量图标字体可用 ，我也一直没有find关于如何完成“图标字体技术”的资源。 还有大量的资源显示图标字体如何集成 ，但似乎没有人分享或写这个如何完成！
字形是图像而不是字体。 所有的图标都在一个精灵图像（也可作为单独的图像）中find，并将它们添加到位置为backround-image s的元素：
实际的字体图标（例如FontAwesome ） 确实需要下载特定的字体并使用content属性，例如：
@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"; }
由于content属性在旧版浏览器中不受支持 ，因此也使用图片 。
下面是一个用作字体的完全未加工FontAwesome的例子，转向 （ – 你可能无法看到这个！）变成救护车： http : //jsfiddle.net/GWqcF/2
如果你的问题是一个CSS类如何插入一个特定的字符（这将在特殊的字体中呈现为一个图标），看看FontAwesome的源代码 ：
.icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; }
因此，CSS内容指令被用来插入字符（这是从Unicode的一个特殊的专用保留区域，不会混淆其他读者）。
Webfont图标如何工作
Webfonts图标通过使用CSS来使用content属性注入特定的字形到HTML中。 然后使用@ font-face加载一个样式化注入的glyph的dingbat webfont。 结果是，注入的字形成为所需的图标。
首先，您需要一个带有您需要的图标的webfont文件，可以为特定的ASCII字符（A，B，C，！，@，＃等）或Unicode字体的专用区域字体中的空格不会被Unicode编码字体中的特定字符使用。
在这里你可以阅读如何创buildwebfont图标 – > 链接
检查这个，它完全使用CSS
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .battery.icon { color: #000; position: absolute; margin-left: 2px; margin-top: 6px; width: 13px; height: 7px; border-radius: 2px; border: solid 1px currentColor; } .battery.icon:before { content: ''; position: absolute; right: -3px; top: 1px; width: 2px; height: 3px; border-radius: 0 2px 2px 0; border-top: solid 1px currentColor; border-right: solid 1px currentColor; border-bottom: solid 1px currentColor; } .battery.icon:after { content: ''; position: absolute; left: 1px; top: 1px; width: 8px; height: 5px; background-color: currentColor; } </style> </head> <body> <div class="battery icon"></div> </body> </html>
