借鑒百度對此標題的評價：
使用字體圖標的優勢
字體圖標除了圖像清晰度之外，比位圖還有哪些優勢呢。
適用性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標字體加載了，你的圖標就會馬上渲染出來，不需要下載一個圖像。
可擴展性：圖標字體可以用過font-size屬性設置其任何大小。這使您能夠隨時輸出不同大小的圖標，然而，使用位圖，你必須得為每個不同大小的圖像輸出一個不同文件。
靈活性：文字效果可以很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。他們還可以在任何背景下顯示。
兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。詳細兼容性可以點擊這里。
根據http://iconfont.cn/help/platform.html 該網址內容的介紹，我們一步步來。
第一步
選出一個你的小圖標，放入PS 或者其他什么圖片轉換工具將圖片轉換成 SVG格式的圖片(如果沒看到SVG格式，說明你的PS工具版本太低啦) 然后拖到http://iconfont.cn/icons/uploadShow 此頁面 上傳剛剛的SVG圖標
第二步
上傳成功后會出現如圖所示的樣子
然后填寫名稱和Tag的時候你自己隨便填寫一個名稱 一定要記住名稱，然后編輯制作，成功后直接將剛剛的名稱放到該網頁的搜索框搜索那個名稱 你會發現真的存在！ 好的，將它加入你的購物車類型的東西， 成功了一半了！！！
第三步
第二步最后也可以不加“購物車”，直接點擊下載，點擊下載 然后打開 你會發現出現一堆垃圾！但是它可以用 是成功的 
雖然成功了，但是我們還得會調用它！
第四步(調用)
打開你的項目 iconfont.css文件內容復制到項目<style>里面(只要你調用了就OK啦)，同樣demo.css里面的內容很多垃圾，你只需要復制出自己需要的類的名稱的css就可以了
基本就是上面紅色窗口的那兩串代碼而已.....復制到你的頁面<style></style>里去！
還沒好！！！
什么 .eot .svg .ttf .woff這幾個鬼玩意兒要用的！ 將這四個復制到你項目的某個文件夾下，隨便取名font文件夾，然后在剛剛的iconfont.css里面修改那幾個url的路徑，使其對應你存放這四個文件的路徑，不要弄錯了，這步驟很關鍵！
如圖吧
第五步
在頁面上隨便弄個標簽，給它上面你定義的標簽class 名稱就好了 <i class="icon iconfont"></i> icon iconfont樣式不要調用錯了 這里的。。e600就是對應上面紅色窗體的\e600(可自己定義)
PS:假如一次性有幾百個圖標 那么會不會生成 幾百個*4 的 .eot .svg .ttf .woff 文件呀 ！！！ 那樣太恐怖了， 這時候 ，直接在下載這個文件的之前，將所有你要制作的圖標全部加入你的“購物車”，一次性下載你所需要的圖標就好啦， 只有四個那種文件，被封裝在一起啦！
你中途突然想換一個圖標？？？ 最好不要刪除你購物車里面的圖標，中途更換，重新制作，然后覆蓋原先的 .eot .svg .ttf .woff 文件 就完成了。