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

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

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

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

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