css - 对字体图标的工作方式感到困惑

Question

我发现使 font-awesome 类起作用的是目标元素中的伪元素。例如，如果我想要一个相机图标，我只需在目标元素中插入一个内容为 \f083 的伪元素即可。 :

h1:before {
    content: '\f083';
}

但我的困惑是，如果我直接设置 \f083作为一些元素的内容，如 <span>\f083</span> ，该元素不会出现图标。

那么字体图标究竟是如何工作的呢？为什么内容只在伪元素中起作用？

Answer 1

在 CSS 中，像 '\f083' 这样的字符串文字是字符的转义序列。也就是说，\f083 表示单个Unicode字符U+F083(私有(private)区域字符，无默认含义)。

HTML 不遵循那些相同的转义序列代码。 “\f083”在 HTML 中的意思就是“\f083”。 HTML 中等效的转义序列是 。

在 CSS 和 HTML 中，您可以简单地编写实际字符本身:“”。虽然默认情况下它是一个未分配的字符，但它要么不会显示在您的编辑器中，要么显示为正方形或其他东西，而且它还会受到文件编码的影响，这使得它有点难一起工作。