sketch強(qiáng)大的插件能夠為交互和UI設(shè)計師節(jié)省很多時間成本谷醉，提高工作的效率，今天來談?wù)勗谧鲈秃蚒I需要用到的一款插件，插件名叫 icon font粱檀。將分三個方面帶大伙來認(rèn)識了解并掌握翔曲。
一迫像、認(rèn)識icon font插件
icon font實(shí)際上就是把圖標(biāo)轉(zhuǎn)化成字體，以字體文件的形式安裝瞳遍，安裝好后闻妓，圖標(biāo)就以字體的形式輸出至軟件里，可編輯傅蹂，可以轉(zhuǎn)換成形狀纷闺，作者使用的sketch版本是48.1算凿，如果你的sketch需要更新版本那么需要注意的是在更新前把圖標(biāo)字體導(dǎo)出字體包，sketch更新完后再安裝導(dǎo)出的字體包以保留自定義字體犁功。
二氓轰、icon font插件如何安裝
插件的安裝大致可以分為三個步驟，首先下載icon font插件 Icon Font.zip浸卦，雙擊 Icon Font.sketchplugin 完成安裝署鸡，插件網(wǎng)址https://sketchapp.com/plugins。具體操作如下圖所示：
第二步：1.安裝 Font Bundles限嫌，執(zhí)行 Plugins >icon font> What is a Font Bundles?靴庆，在彈出的框中點(diǎn)擊底部的網(wǎng)址 https://github.com/keremciu/font-bundles，在新打開的頁面下載fFont Bundles怒医，解壓 Font Bundles炉抒，雙擊安裝 ttf-files 里的 otf / ttf文件。
2.執(zhí)行 Plugins > icon font>Install a Font-Bundle 選中 Font Bundles 文件夾稚叹，完成安裝焰薄。具體操作如下圖所示：
三、icon font如何使用
這個插件的的強(qiáng)大之處是可以導(dǎo)入從圖標(biāo)網(wǎng)站下載下來的字體圖標(biāo)文件扒袖，首先我們打開http://fontello.com或者http://iconfont.cn塞茅，前面的是國外的，后者是國內(nèi)阿里的季率，打開網(wǎng)址輸入網(wǎng)址http://fontello.com野瘦，可以不用登錄，然后輸入關(guān)鍵詞檢索飒泻，制作一套通用的字體圖標(biāo)鞭光，具體操作具體操作如下圖所示：
注：可以設(shè)計快捷鍵，格式一般是cmd ctr蠢络，比如我設(shè)置了快捷鍵cmd ctrl 2衰猛。
當(dāng)sketch版本需要升級的時候，要記得把字體圖標(biāo)保存一份刹孔，在sketch升級好后啡省，導(dǎo)入保存好的字體圖標(biāo)即可，保存字體文件操作如下圖
：
最后來一波icon font的實(shí)際應(yīng)用操作髓霞，執(zhí)行 Plugins > icon font>Grid Insert > 選擇對應(yīng)的 Icon Font 彈出管理界面卦睹，點(diǎn)擊相應(yīng)圖標(biāo)插入到 Sketch 文檔。具體操作如下圖所示：
