css - 混淆字体图标如何工作

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

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

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

那么font-icon到底如何工作？为什么内容仅在伪元素中起作用？

最佳答案

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

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

在CSS和HTML中，您都可以简单地写出实际的字符：“”。尽管由于默认情况下它是未分配的字符，所以它要么不会显示在编辑器中，要么不会显示为正方形或其他形状，而且还会受文件编码的约束，这使得它很难编码与。

关于css - 混淆字体图标如何工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32610507/