CSS 图标字体：它们是如何工作的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15503139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Icon Fonts: How do they work?
提问by Vivek Chandra
I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but howdo icon fonts work?
我知道图标字体只是字体，您可以通过调用它们的类名来获取图标，但是图标字体是如何工作的？
I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens.
我尝试检查 Chrome 中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我无法弄清楚这是如何发生的。
I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available. There are also loads of resources showing how icon fonts can be integrated, but no one seems to be sharing or writing about howthis is done!
即使有大量可用的图标字体，我也未能找到有关如何完成这种“图标字体技术”的资源。还有大量资源展示了如何集成图标字体 ，但似乎没有人分享或写下如何做到这一点！
采纳答案by James Donnelly
Glyphiconsare imagesand nota font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:
Glyphicons是图像而不是字体。所有图标都在一个精灵图像（也可作为单个图像）中找到，并且它们被添加到元素中作为定位backround-images：
Actual font icons (FontAwesome, for instance) doinvolve downloading a specific font and make use of the contentproperty, for instance:
实际字体图标（例如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";
}
As the contentproperty isn't supportedin older browsers, these alsomake use of images.
由于旧版浏览器不支持该content属性，因此这些浏览器也使用了图像。
Here's an example of completely raw FontAwesome in use as a font, turning ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2
这是一个完全原始的 FontAwesome 用作字体的示例，将（ - 你可能看不到这个！）变成一辆救护车：http: //jsfiddle.net/GWqcF/2
回答by Thilo
If your question is how a CSS class can insert a specific character (that will be rendered as an icon in the special font), take a look at the source for FontAwesome:
如果您的问题是 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"; }
So a CSS content directive is used to insert the character (which is from a special private-use reserved area of Unicode that does not mess up other readers).
因此，使用 CSS 内容指令插入字符（该字符来自 Unicode 的特殊专用保留区域，不会弄乱其他阅读器）。
回答by artamonovdev
How webfont icons work?
网络字体图标如何工作？
Web-fonts icons work by using CSS to inject a specific glyph into the HTML using the content property. It then uses @font-faceto load a dingbat webfont that styles the injected glyph. The upshot is that that injected glyph becomes the desired icon.
Web 字体图标通过使用 CSS 使用 content 属性将特定字形注入 HTML 来工作。然后它使用@font-face加载一个 dingbat webfont 来设置注入的字形的样式。结果是注入的字形成为所需的图标。
To begin, you'll need a web-font file with the icons you need, either defined for particular ASCIIcharacters (A, B, C, !, @, #, etc.)or in the Private Use Area of the Unicode font, which are spaces in the font that will not be used by specific characters in a Unicode encoded font.
首先，您需要一个带有您需要的图标的网络字体文件，这些图标是为特定ASCII字符定义的，(A, B, C, !, @, #, etc.)或者是在 Unicode 字体的专用区域中定义的，这些是字体中的空格，不会被特定字符在Unicode 编码字体。
Read more, how to create webfont icon at Responsive Webfont Icons.
阅读更多，如何在响应式 Webfont 图标中创建webfont 图标。
