IcoMoon 是一個免費的圖標庫。可以下載自己需要的圖標
三、使用流程、操作演示
進入主頁，點擊下圖所示區域開始：
每個圖標你都是可以自己進行標記的（移上去會看到Edit, 點擊之），然后——
注：編輯框下面的Download會下載該圖標svg格式的zip文件, Replace按鈕則是上面新生成一個圖標，而Duplicate則是原來替換。
選擇好你要的圖標之后，點擊頁面下方黑色條條上面的f字樣的圖標按鈕，生成字體：
然后你會看到下圖所示畫面：
剩下的就是點擊上圖的下載標識進行zip打包文件下載了：
您會得到icomoon*.zip的文件。例如，icomoon1512.zip，打開zip包，會看到里面有適合各個瀏覽器的字體以及demo演示：
然后，你就可以依葫蘆畫瓢使用這些圖標形狀字體了！
四、IcoMoon demo中圖標字體使用簡介
demo中字符圖標的顯示用了HTML5以及一些高級CSS技巧。
關鍵代碼如下：
[data-icon]:before { font-family: 'IcoMoon'; content: attr(data-icon); speak: none;
}
意思是所有含有”data-icon“屬性(HTML5 data-*)的標簽都應該這段樣式。使用了before偽類與content內容生成，而content內容就是”data-icon“的屬性值。
參見如下HTML：
<div class="fs1" aria-hidden="true" data-icon="!"></div>
!為HTML轉移字符，對應普通!字符。轉義的好處（我估計）是沒有一些編碼不兼容的問題。
上面的方法與技巧都是比較新的，因此，顯然的，對於IE6~8瀏覽器就是屌絲眼中的白富美。因此，在實際的傳統web項目中（手機自然可以）是不適用的。
五、使用其他開源圖標字體
即使IcoMoon上有600+圖形，但是，並不一定滿足我們的特定需求，我們該怎么辦？
1. 下找到對應的的圖標下載文件svg或者是fonts文件。
3. 在IcoMoon APP頁面點擊下面的圖標導入該SVG文件：
然后，我們自定義的字體就會顯現出來：
4~10. 與IcoMoon自帶600+字符操作一樣，該選擇選擇，該編輯編輯，該刪除刪除，該生成生成，上面都一步一步演示過了，這里不贅述。
總結來自：http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/