在網頁中插入icon圖標的方法總結

1. CSS Sprite
2. font + HTML
3. font + CSS

其中不太明白的是\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應用系列（二）如何制作圖標字體？

icon小圖標