1.設計師做到的圖片(儘量是純色的圖片)
2.利用vector Magic工具導成svg格式的文件(下載地址：http://rj.baidu.com/soft/detail/18913.html?ald)
2.1 此工具的用法，可以上網自行百度查詢
3.導好的svg文件後，此時需要找到字體圖標製作的網站Icomoom.io (網址:https://icomoon.io/)
4.下載好的文件
打開後運行就能看到效果了。取其style.css和fonts可以直接應用於項目當中，
圖標字體運用以及其優勢與劣勢：
在做手機端Web
App項目中,經常會遇到小圖標在手機上顯示比較模糊的問題，經過實踐發現了一種比較好的解決方案，圖標字體化。在微社區項目中，有很多小的Icon（圖標），如分享、回覆、贊、返回、話題、訪問、箭頭等，這些Icon（圖標）一般都是純色的。開始製作時考慮用雙倍大小的Sprite圖，通過CSS樣式設置只顯示二分之一尺寸，這樣在Retina屏上顯示的大小是正常的，一旦放大屏幕後圖標又變得模糊不清，測試的效果不是很理想，後來又考慮多套圖標適配方案、SVG矢量圖等，都因爲種種原因放棄掉了（如多套圖標繁瑣、Android 2.3不支持SVG格式等），爲了解決以上問題，用到了圖標字體，
通過查閱Icon Font相關技術博客和文章，並結合在項目中實際應用梳理出了圖標字體化淺談這篇文章，望對正在學習和使用的重構同學們有一個參考和幫助！文章內的內容參考了相關技術文章並加上自已的理解，錯誤在所難免，歡迎批評指正。下圖爲微社區用到的部分圖標字體。
優勢：
輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優化
靈活性：圖標字體可以用過font-size屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話，必須得爲每個不同大小和不同效果的圖像輸出一個不同文件。
兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。詳細兼容性可以點擊這裏。
除了以上優勢之外，當然也有劣勢：
1、圖標字體只能被渲染成單色或者CSS3的漸變色，由於此限制使得它不能廣泛使用。
2、使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
3、創作自已的字體圖標很費時間，重構人員後期維護的成本偏高。
（http://www.frontopen.com/1906.html）