使用內容來表示使用CSS僞元素的圖標

Question

我只是偶然發現了以下CodePen：http://codepen.io/html5web/pen/enlAc。在源端，你會發現下面的代碼行：

.twitter:before { 
    content:"\F021"; 
} 
.in:before { 
    content:"\F022"; 
} 
.vimeo:before{ 
    content:"\F024"; 
} 

有趣的是，在內容屬性的魔法值會導致顯示的圖標。我無法理解價值觀來自何方和何處，以及爲什麼會這樣。這怎麼可能？

Answer 1

這是特定字符的CSS十六進制值。這不會創建圖標 - 它們使用的圖標字體將各種圖標分配給特定的十進制/ ASCII字符值。只是谷歌「圖標字體」，你會發現很多關於這方面的信息。

參考：

1. http://css-tricks.com/css-content/
2. http://css-tricks.com/snippets/html/glyphs/
3. http://www.evotech.net/articles/testjsentities.html（轉換ASCII到CSS十六進制值）

此外，:before和:after是僞元素，而不是僞類。

Answer 2

這是可能的，因爲字體文件。提供的內容是導致圖標的字體內的字符。