我发现使 font-awesome 类起作用的是目标元素中的伪元素。例如,如果我想要一个相机图标,我只需在目标元素中插入一个内容为 \f083
的伪元素即可。 :
h1:before {
content: '\f083';
}
但我的困惑是,如果我直接设置 \f083
作为一些元素的内容,如 <span>\f083</span>
,该元素不会出现图标。
那么字体图标究竟是如何工作的呢?为什么内容只在伪元素中起作用?
最佳答案
在 CSS 中,像 '\f083'
这样的字符串文字是字符的转义序列。也就是说,\f083
表示单个Unicode字符U+F083(私有(private)区域字符,无默认含义)。
HTML 不遵循那些相同的转义序列代码。 “\f083”在 HTML 中的意思就是“\f083”。 HTML 中等效的转义序列是
。
在 CSS 和 HTML 中,您可以简单地编写实际字符本身:“”。虽然默认情况下它是一个未分配的字符,但它要么不会显示在您的编辑器中,要么显示为正方形或其他东西,而且它还会受到文件编码的影响,这使得它有点难一起工作。
关于css - 对字体图标的工作方式感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32610507/