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

Question

在创建和学习 Bootstrap 页面时。我遇到了 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 的图像，并且无论何时要使用该图像，都必须确保使用该字体-face 为元素并使用 utf8 代码显示图像。在 html 中它有点像 <span class="iconfont">&#xe001;</span> .如果您使用 css 添加图像，那么就像您的示例一样。