今天學(xué)到一招，所以決定簡(jiǎn)單寫寫如何利用圖標(biāo)字體生成器IcoMoon把自己制作的圖標(biāo)變成字體，下面以O(shè)SChina的圖標(biāo)為例。

一、確保logo轉(zhuǎn)成純色，并保存為svg格式

因?yàn)镺SC的logo是綠色帶描邊的，所以先在Illustrator里面把logo變成純色路徑，這里我用的黑色。還有因?yàn)樽煮w屬于矢量文件，所以把logo存儲(chǔ)為.svg格式的文件方便接下來的導(dǎo)入。

二、進(jìn)入IcoMoon，導(dǎo)入剛剛保存的svg文件

三、編輯圖標(biāo)名稱

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

四、創(chuàng)建字體，并下載相關(guān)字體文件

到這里，字體創(chuàng)建已經(jīng)完成，你可以解壓文件預(yù)覽下效果了。

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

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

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