在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>）实现的，而是由{{1}的内部文字实现的} node。

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

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

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

icon font

如果.fa-flag:before { content: "\f024"; } 选择器和:before属性未实现图标，它们是如何实现的？

Answer 1

这是一个＆＃34;技巧＆＃34;其中图标实现为字体中的组合字形。这意味着字母组合＆＃34;添加＆＃34;和＃34;重播＆＃34;在字体中显示为一个字符，类似于＆＃34; fi＆＃34;和＆＃34; fl＆＃34;通常表示为许多字体中的一个字符。 （有关详细信息，请参阅this Wikipedia article。）因此，图标不会来自CSS声明。

如果将字体应用于输入字段，您可以看到它是如何工作的：如果您开始随机输入，则不会看到任何内容，因为个别字符没有分配给它们的字形，但是如果你键入＆＃34;添加＆＃34;你会看到一个+符号出现。

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;