在 CSS/JavaScript 中，这个图标/字体插件是如何实现的？答案

【问题标题】：In CSS/JavaScript, how is this icon/font plugin implemented?在 CSS/JavaScript 中，这个图标/字体插件是如何实现的？
【发布时间】：2015-09-14 09:11:18
【问题描述】：

Jsfiddle 演示

http://jsfiddle.net/hc046u9u/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<i class="material-icons">add</i>
<i class="material-icons">replay</i>

最让我困惑的是图标不是通过类属性实现的（如或），而是节点的inner text。

当我在 chrome 的开发者工具中查看  节点时，它们看起来几乎一样，并且对于 CSS 选择器似乎无法区分。

如果图标由内部文本设置，CSS如何为这些节点分配不同的图标？

我无法理解的另一件事是这些图标是如何实现的（图标字体，PNG 或 SVG）。似乎它们是由icon font 实现的，但我找不到像这样的任何 CSS 声明：

.fa-flag:before {
  content: "\f024";
}

如果:before选择器和content属性没有实现图标，它们是如何实现的？

【问题讨论】：

是导入的字体文件？
woff 文件来自here
@hanfeisun 图标是类实现的。碰巧这些图标来自字体系列“Material Icons”。
@adeneo 我看到有一个woff文件，但是节点的内容怎么可以换成woff文件中字符的编码呢？
@AlbertoI.N.J.谢谢，但是我没有看到节点的内部文本被特殊字符的编码替换，例如"\f024"。此外，我找不到CSS的特殊字符设置..

标签： javascript jquery html css fonts

【解决方案1】：

这是一个“技巧”，其中图标被实现为字体中的组合字形。这意味着字母组合“add”和“replay”在字体中显示为一个字符，类似于“fi”和“fl”在许多字体中通常表示为一个字符。（有关更多信息，请参阅this Wikipedia article。）因此这些图标不是来自 CSS 声明。

如果您将字体应用到输入字段，您可以看到它是如何工作的：如果您开始随机输入，您将看不到任何内容，因为没有为单个字符分配字形，但是如果您输入“添加" 你会看到一个 + 符号出现。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<textarea class="material-icons">add remove replay</textarea>

【讨论】：

术语是ligature。 （我的速度太慢了 23 秒。:-)）（编辑：哦，对不起，我没有意识到你已经链接了那篇文章！）
@hanfeisun：听起来你已经习惯了像Font Awesome这样的图标字体，用::before来做，但是除了元素内容之外没有理由不能用连字来做是 content，因此文本适合使用它的位置很重要。使用 Font Awesome 和类似功能，您可以将fa-close 用于您想要的任何目的（不仅仅是“关闭”某些东西），而不会成为页面 content 的一部分。但是，如果您控制字体生成器，您可以创建一个适合您的应用程序的连字字体，并且您可以将图标和可索引/屏幕可读的文本放在一起。
我还建议大家阅读 issue #371 @ alistapart 关于符号字体的内容，其中也包括连字。
虽然这是一个巧妙的技巧，但在翻译页面或您想在非英语网站上使用该字体时会中断。每种语言都需要该字体的版本，这可能变得不切实际。
@SimonLehmann，好点子。这个技巧会导致国际化问题。