使用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 Hex值）

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

Answer 2

由于字体文件，这是可能的。提供的内容是字体内的字符，通向图标。