今天學到一招，所以決定簡單寫寫如何利用圖標字體生成器IcoMoon把自己制作的圖標變成字體，下面以OSChina的圖標為例。

一、確保logo轉成純色，并保存為svg格式

因為OSC的logo是綠色帶描邊的，所以先在Illustrator里面把logo變成純色路徑，這里我用的黑色。還有因為字體屬于矢量文件，所以把logo存儲為.svg格式的文件方便接下來的導入。

二、進入IcoMoon，導入剛剛保存的svg文件

三、編輯圖標名稱

點擊edit按鈕，選中我們剛剛上傳的圖標修改tags屬性可為圖標加上標簽。第一個tag名將是這個圖標的名稱，不過現在暫時只能接受英文命名。如果不修改tags，到時候字體的class名就是icon-untitled，所以建議還是修改一下。

四、創建字體，并下載相關字體文件

到這里，字體創建已經完成，你可以解壓文件預覽下效果了。

今天這里只是講了把一個圖標變成字體，同樣你可以把你設計好的成套的圖標通過上面的方法全部轉化成一個字體，通過相應的class對其進行訪問。只是你需要注意確保每一個圖標尺寸大小相同，這樣才能得到一致的圖標。你也可以參見《如何把你的圖標轉換成web字體》

 
原文地址：一周一博
作者：曾沙

================關于優設網================
“優設網uisdc.com“是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量42萬的人氣微博@優秀網頁設計?，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：