使用内容来表示使用CSS伪元素的图标

Question

我只是偶然发现了以下CodePen：http://codepen.io/html5web/pen/enlAc。在源端，你会发现下面的代码行：

.twitter:before { 
    content:"\F021"; 
} 
.in:before { 
    content:"\F022"; 
} 
.vimeo:before{ 
    content:"\F024"; 
} 

有趣的是，在内容属性的魔法值会导致显示的图标。我无法理解价值观来自何方和何处，以及为什么会这样。这怎么可能？

Answer 1

这是特定字符的CSS十六进制值。这不会创建图标 - 它们使用的图标字体将各种图标分配给特定的十进制/ ASCII字符值。只是谷歌“图标字体”，你会发现很多关于这方面的信息。

参考：

1. http://css-tricks.com/css-content/
2. http://css-tricks.com/snippets/html/glyphs/
3. http://www.evotech.net/articles/testjsentities.html（转换ASCII到CSS十六进制值）

此外，:before和:after是伪元素，而不是伪类。

Answer 2

这是可能的，因为字体文件。提供的内容是导致图标的字体内的字符。