css content 如何自定義生成圖標？

01-03

完全css的小白，只是想自己在github上搭建一個博客
一下是我看到的一段css的源代碼，其實就是在分享到為微博的時候的圖標
a#end_cc, a#twitter, a#weibo {
margin: 0 5px;

border-bottom: none; }
a#end_cc:before, a#twitter:before, a#weibo:before {
font-size: 24px;
font-family: "fontello"; }
#end_cc:before {
content: "e7a5"; }
#twitter:before {
content: "f309"; }

#weibo:before {
content: "f33f"; }
其中不太明白的是f309
這些是如何定義的，我在網上找也沒有找到。
在利用css的content:"?f003"生成的內容，這裡用到的是什麼技術？里有人提到，就是我想問的。但是我也找了回答給出的鏈接，還是不特明白。
現在我想在這個基礎上自己做一個分享到豆瓣的小圖標。不知道應該怎麼搞？

現在的效果就會是這個樣子的。我要繼續仿照應該怎麼搞？
多謝大家！

這個是webfont

在css裡面，如果想使用某個字體，但是又擔心用戶電腦上沒有，就可以使用font-face屬性從伺服器上引用這組字體。具體怎麼用，搜一下font-face就很清楚了，不多說。

其中不太明白的是f309

這一段css表示：

在節點#twitter前面，插入一段內容（"f309"）。

這個內容（"f309"）是一個字元，f309是這個字元的16進位unicode編碼。

不理解可以把 "f309" 改成 "6211" ,然後查看效果。事實上 content:"我" 和 content:"6211" 的含義是一樣的。

需要知道，計算機裡面每個字元都有一個unicode編碼,比如「我」的unicode是6211（16進位），而字體文件的作用是規定某個字元應該用什麼形狀來顯示。

unicode字符集裡面，E000 至 F8FF屬於用戶造字區。原本是空的，用戶可以在字體文件裡面隨便定義這些字元的形狀。我們所見的webfont icon，一般就選在這一部分。

（上面這段講得可能不專業，大致知道是這麼一回事就行。）

要使用自定義字元，大致步驟是：

自己造一個字體文件，把e000所對應的字元形狀畫上新浪的icon，保存為常用字體文件格式。
在css中使用font-face引用這個字體文件，任意命名（不和已有的重複，比如叫myfonticon）
需要顯示圖標的地方定義font-family為myfonticon，content屬性設為"e000"。

造字可以用Fontographer 5，參考這篇文章webfont應用系列（二）如何製作圖標字體？

其實網上已經有一大堆免費好用webfont icon，比如：

IcoMoon App

Ionicons: The premium icon font for Ionic Framework

Fontello - icon fonts generator

題主說的問題可以分為幾個小問題：

:before（或:after）是什麼玩意？

答：偽元素（注意，不是偽類）。

它雖然被收錄到css3標準中，但其實主流瀏覽器都已經支持偽元素了，這其中包括了IE8+。

偽元素實際上在html dom中不存在，但會被瀏覽器渲染成html的一個節點，比如題主提到的#twitter:before，就是在#twitter這個標籤里的開始處插入了一個子元素（節點），同理，:after是在該元素的最後插入子元素，它與以下html具有相同的效果：

& &&& ..... &

偽元素與一個CSS屬性息息相關，就是content，顧名思義，這是定義偽元素內容的，如：

#twitter:before{ display:inline; content:"我是個偽元素"; }

相當於：

& &我是個偽元素& ..... &

最廣泛的應用大概是這樣的：

剩下的小問題容我吃完飯來說。

==============

2.『f33f』是如何被顯示為圖標的？

答：

這裡用到了WebFont，也就是一種「字體」，這種字體包含了矢量圖標，諸如『f33f』就是對應矢量圖標的編碼。

你這段代碼並不全，css里應該還包含這段：

@font-face { font-family: "XXX"; /* 給你的自定義WebFont命名 */ src:url("xxx.eot"); src:url("xxx.eot?#iefix") format("embedded-opentype"), url("xxx.woff") format("woff"), url("xxxn.ttf") format("truetype"), url("xxx.svg#micon") format("svg"); font-weight: normal; font-style: normal; ... }

它的好處是不必再使用css spirit切圖了，而且作為矢量圖可以以任意你想要的尺寸顯示，另外，這種方法兼容性很好（ie6 7 可以顯示，前提是你為不同的瀏覽器準備了不同的字體文件格式，如eot、woff、ttf、svg）。

如何製作它？請參見@朱勃的答案，已經很詳細了，不再贅述。

3.直接將icon的unicode寫在html上不就成了，為什麼還得費勁加偽元素:before呢？

答：

從這段代碼看，你知道"f309"、"f33f"分別代表的是哪些圖標么？

別說你看不出來，即使WebFont的作者也看不出來啊，這些unicode編碼顯然不如html的class或者id語義化。如果在一個大型網站上多處復用這些font icon，那是相當要命的（每用一次就去查一查？），因此，就出現了一種題主展示的解決方案：

HTML:

&&