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

Question

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

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

有趣的是，content 属性的魔法值会导致显示一个图标。我不明白这些值(value)观是如何来的，从哪里来的，以及为什么会这样。这怎么可能？

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 是伪元素，不是伪类。