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

Question

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

的伪元素

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

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

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

Answer 1

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

HTML 不遵循那些相同的转义序列代码。 HTML 中的“\f083”仅表示“\f083”。 HTML 中的等效转义序列为 .

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