CSS中的內容屬性顯示圖像圖標

Question

創建和學習引導頁面時。我遇到了CSS的內容屬性，我讀了幾篇文章，並得到了它的工作原理。但是下面的代碼片斷顯示了一個圖像圖標，但content屬性值實際上不是圖像url，而是代碼。我不清楚如何在沒有url的情況下顯示圖片，圖片來自哪裏？

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

以下是html元素，以顯示使用上述CSS圖像圖標：

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

但什麼是"\e001"的是，圖像代碼或其他什麼東西？

Answer 1

他們是utf8代碼。有很多描述不同標準字體的字形的網站，但是你也可以用你選擇的任何圖像來定義你自己的字體集。

如果你使用一個webfont，例如fontello，但有很多像這樣的網站，你可以定義什麼圖像作爲字符\ e0001來使用，並且每當你想使用該圖像時，都必須確保使用該圖像元素的font-face並使用utf8代碼來顯示圖像。在HTML中它將有點像<span class="iconfont">&#xe001;</span>。如果你用css添加圖像，那麼就像你的例子。