\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是什么意思，它如何知道它是被引用的unknown.svg文件？

我将在这里使用此Code Pen遇到类似的情况：

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

Answer 1

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

e901 character code是预留给私人使用的块的一部分。并且可能被分配给在那里使用的字体中的特定字形。我猜这是一种图标字体。

f003也是一样的。该CodePen使用FontAwesome字体，我们可以从FA文档中看到它与envelope icon相对应(正如预期的那样)。

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/

玩得开心!