\e901 对于 CSS 内容标记意味着什么？

Question

在我们的CSS文件中，我看到这个：

[class*="iconsmall-"]:before {
font-family: 'icons';
font-style: normal;
font-size: 18px;
padding-left: 5px;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
} 
.iconsmall-unknown:before {content: 'e901';}

我们有一个未知的.svg文件。 \e901是什么意思，它如何知道它是正在引用的未知.svg文件？

我将在这里使用此代码笔遇到类似的情况：

引用 \f003 的 https://codepen.io/bungeedesign/pen/XqeLQg。

Answer 1

表示后面是 Unicode 字符引用。 由四个十六进制数字组成。

e901 字符代码是保留供私人使用的块的一部分。 并且可能分配给那里使用的字体中的特定字形。 我猜这是一个图标字体。

f003 是一样的。 CodePen使用的是FontAwesome字体，我们可以从FA文档中看到它对应于(如预期的那样(与信封图标相对应。

Answer 2

CSS 属性content可用于显示文本、图像和 SVG 代码。是一种"转义"特殊字符并显示字体特定字符的方法。后面总是跟着 unicode。在您的示例中，它是 e901 用法：

.hello::before { content: "world" } // shows world
.hello::before { content: url('/assets/icons/icon.svg') } // shows a SVG image
.hello::before { content: "u2663"} // shows ♣ (instead of "u2663")

更多示例：https://css-tricks.com/snippets/html/glyphs/

玩得愉快！