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文件？

在这种情况下，我会用这种密码笔：

https://codepen.io/bungeedesign/pen/XqeLQg，其中引用了\ f003。

Answer 1

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/

玩得开心！

Answer 2

\表示紧随其后的Unicode字符引用。由四个十六进制数字组成。

e901 character code是保留供私人使用的块的一部分。并且可能已分配给此处使用的字体中的特定字形。我猜它是图标字体。

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

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

2 个答案: