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

作者：黑貓
鏈接：https://www.zhihu.com/question/22022905
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

這個是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，一般就選在這一部分。
（上面這段講得可能不專業，大致知道是這么一回事就行。）

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

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

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

其實網上已經有一大堆免費好用webfont icon，比如：
IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator