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

Question

我刚刚偶然发现了以下 CodePen：http ://codepen.io/html5web/pen/enlAc 。在源代码的末尾，您将找到以下代码行：

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

有趣的是，内容属性的神奇值会导致显示一个图标。我不明白这些价值观是如何以及从哪里来的，以及为什么会这样。这怎么可能？

score 2 · Accepted Answer

它是特定字符的 CSS 十六进制值。这不会创建图标 - 他们正在使用一种图标字体，将各种图标分配给特定的十进制/ascii 字符值。只需谷歌“图标字体”，您就会找到大量有关此的信息。

参考：

而且，:beforeand:after是伪元素，而不是伪类。

score 0 · Accepted Answer

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

2 回答 2