image - CSS 中的内容属性以显示图像图标

Question

在创建和学习引导页面时。我遇到了 css 的 content 属性，我读了几篇文章，我知道它是如何工作的。但是下面的代码片段向我显示了一个图像图标，但内容属性值实际上不是图像 url，而是一个代码。我不清楚我们如何在没有 url 的情况下显示图像以及图像来自哪里？

.test.glass i:before {
  content: "\e001";
}

以下是使用上述 css 显示图像图标的 html 元素：

<span class="test glass"><i></i></span>

但那是什么"\e001"图像代码或其他东西？

Answer 1

它们是 utf8 代码。有很多网站描述了不同标准字体的字形，但您也可以使用您选择的任何图像来定义自己的字体集作为任何字符。

如果您使用网络字体，例如来自 fontello，但有很多类似的网站，您可以定义要使用的图像作为字符 \e0001 并且每当您想使用该图像时，您必须确保使用该字体元素并使用 utf8 代码显示图像。在 html 中它会像<span class="iconfont">&#xe001;</span>. 如果您使用 css 添加图像，那么就像在您的示例中一样。