設(shè)計(jì)師將圖標(biāo)上傳到 icoMoon 平臺(tái)，用戶可以自定義下載多種格式的 icon，平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體巾钉，便于前端工程師自由調(diào)整與調(diào)用规脸。
工具：
icoMoon 坯约， 工具地址為 https://icomoon.io/ , 工具網(wǎng)站看起來像是這個(gè)樣子的：
常用平臺(tái)介紹：
阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái)莫鸭。 http://www.iconfont.cn/
icoMoon 制作圖標(biāo)字體的步驟：
1闹丐、登錄 https://icomoon.io/ 之后，首先點(diǎn)擊 “iconMoon App” 的按鈕被因。
2卿拴、點(diǎn)擊按鈕 “ import Icons” 將本地準(zhǔn)備好的 SVG 圖片上傳到平臺(tái)中。
3梨与、選擇上傳的圖片堕花，點(diǎn)擊 " Generate Font" 確定要轉(zhuǎn)換圖片,生成圖標(biāo)字體。
4粥鞋、生成圖標(biāo)字體中缘挽，有一個(gè) “Get Code” 按鈕，點(diǎn)擊“Get Code”
可以看到生成的信息告訴我們?nèi)绾问褂?圖標(biāo)字體
在 HTML 定義一個(gè) <span> 標(biāo)簽陷虎，CSS 中定義的類到踏，就可以使用不同的圖標(biāo)了。
是不是非常簡單尚猿，在 “Download” 之前窝稿，可以點(diǎn)擊 “Preferences” 設(shè)置下載的文件夾名稱，和瀏覽器的默認(rèn)情況凿掂，CSS 選擇器的選項(xiàng)伴榔，這里可以進(jìn)行自定義，一般使用默認(rèn)即可庄萎。
5踪少、點(diǎn)擊 “ Download” 下載解壓后的 zip 包，在項(xiàng)目中使用 css 文件糠涛，使用一個(gè)標(biāo)簽關(guān)聯(lián)起來援奢，就可以使用不同的圖標(biāo)字體了，在頁面上就是不同的 icon 了忍捡，這樣就完成圖標(biāo)字體的制作了集漾。
參考
慕課網(wǎng)
icoMoon
阿里媽媽MUX
