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

Question

在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>

让我最困惑的是图标不是由类属性(如<i class="icon-add"></i>或<i class="icon-reply"></i>)实现的,而是由节点的内部文本实现的<i>.

当我<i>在chrome的开发人员工具中查看节点时,它们看起来几乎相同,并且似乎无法区分CSS选择器.

如果图标是由内部文本设置的,那么CSS如何为这些<i>节点设置不同的图标？

我无法理解的另一件事是如何实现这些图标(图标字体,PNG或SVG).看起来它们是由实现的icon font,但我找不到任何CSS声明,如:

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

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

Answer 1

这是一个"技巧",其中图标被实现为字体中的组合字形.这意味着字母组合"添加"和"重放"在字体中显示为一个字符,类似于"fi"和"fl"通常表示为许多字体中的一个字符.(有关更多信息,请参阅此维基百科文章.)因此,图标不是来自CSS声明.

如果将字体应用于输入字段,您可以看到它是如何工作的:如果您开始随机输入,则看不到任何内容,因为单个字符没有分配给它们的字形,但如果您键入"添加",那么我会看到一个+符号出现.

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

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