从CSS内容代码生成的图像

Question

在网站上，我看到了一些有趣的元素并对其进行了检查。这就是元素的样子：

CSS定义：

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

我知道可以使用url的{​​{1}}属性嵌入图片，但在这种情况下，没有网址。这个邪恶的魔法是什么？

Answer 1

这只是不图像的图标，而是一个unicode字符。

Font-Awesome也使用它。

请参阅this file：

/* 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";
}
...

Answer 2

\f303是一个unicode符号（只是一个普通的文本字符）。他们可能使用像Font-Awesome这样的特殊字体，其中所有字母/数字/等等都被矢量图像替换。

Here's an example using the Font-Awesome library

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

有关在css中使用Unicode值的详细信息，请参阅this StackOverflow answer。