Html 从CSS内容代码生成的图像

在一个网站上，我看到了一些有趣的元素并进行了检查。这是元素的外观：

CSS定义：

.entry-meta .date a:before {
    content: "\f303";
}

---

我知道可以使用

content

的

url

属性嵌入图像，但在这种情况下，没有url。这个邪恶的魔法是什么？

它只是图标，它不是图像，而是unicode字符

也使用这个

见：

---

\f303

是一个unicode符号（只是一个普通的文本字符）。他们可能会使用一种特殊的字体，如font Awesome，其中包含所有字母/数字等。。被矢量图像替换

---

有关在css中使用Unicode值的更多信息，请参阅。

这是对Unicode字符的引用。这不是一个图像。。。。而且可能有一个

@font-face

声明icons@Xander你能给我一个链接，让我可以阅读更多关于带有@的声明吗？我甚至不知道谷歌是什么意思。谷歌“css

@font-face

”我自己也在想。（+1是我的）。你的回答是正确的。然而，越少，答案就越模糊。对于只懂css的人来说，这是一些看起来很奇怪的代码。@ZachL这是一个很好的观点。我用真正的CSS代码更新了答案。谢谢

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
...

p:before {
    content: "\f143";
    font-family: 'FontAwesome';
}