What is IcoMoon ?
昨兒個(gè)托我們美女UI的福毅舆，接觸了IcoMoon這個(gè)網(wǎng)站值戳，之前確實(shí)沒(méi)摸瑟過(guò)议谷，原諒我孤陋寡聞，昨天小試了一下感覺(jué)不錯(cuò)述寡，趕緊分享之柿隙。那么IcoMoon究竟是干哈的呢？接下來(lái)簡(jiǎn)單介紹下鲫凶。
就我個(gè)人而言禀崖，往往要想找點(diǎn)什么ICON素材啊，往往都是醬嬸滴螟炫，先去FontAwesome(在線圖標(biāo)字體庫(kù)波附，但資源有限)里面巴拉巴拉，或者其他資源看看有沒(méi)有合適的昼钻。如果沒(méi)有就去求助我們大UI掸屡，笑笑給我來(lái)整個(gè)“加號(hào)”啊，笑笑有“減號(hào)”嗎然评？來(lái)一個(gè)來(lái)一個(gè)仅财，笑笑再給我來(lái)個(gè)“垃圾箱”唄...嗯，沒(méi)錯(cuò)碗淌，我一般都是這么折磨我們UI的盏求。個(gè)人還是比較喜歡FontAwesome，其提供的資源很豐富亿眠，風(fēng)格很統(tǒng)一碎罚，而且直接在頁(yè)面內(nèi)引用需要的樣式即可，不需要自己再去調(diào)整素材的樣式纳像。而我們今天要白話的IcoMoon荆烈，大致作用就是生成類似FontAwesome的圖標(biāo)字體。
IcoMoon是一個(gè)在線的圖標(biāo)字體生成器竟趾。其允許我們通過(guò)個(gè)性化設(shè)置生成ICON字體憔购，我們可以上傳本地ICON資源也可以使用IcoMoon給我們提供的豐富素材宫峦，最終生成的ICON字體有多種格式供我們選擇（EOT,SVG,WOFF,TTF）【胧迹總而言之斗遏，有了這個(gè)免費(fèi)資源，我們就可以個(gè)性化的生成ICON字體鞋邑，然后應(yīng)用到我們的WEB頁(yè)面中了诵次。
生成自定義圖標(biāo)字體
當(dāng)我們想要自己的圖標(biāo)圖標(biāo)字體時(shí)，操作步驟就如同把大象關(guān)進(jìn)冰箱里枚碗，歸納起來(lái)可分為三步：
- 準(zhǔn)備自定義ICON素材 ;
- 生成字體文件;
- 在CSS中引用字體文件;
A. 準(zhǔn)備自定義ICON素材
此處需要注意的是逾一，icomoon要求素材格式必須為SVG格式，所以其他格式的素材需提前轉(zhuǎn)換肮雨，在此不做贅述遵堵。
B. 生成圖標(biāo)字體
到 https://icomoon.io/app/#/select 網(wǎng)站生成圖標(biāo)，具體過(guò)程如下：
1 單擊 import icons 按鈕 導(dǎo)入我們準(zhǔn)備好的svg 圖標(biāo)怨规，或者Add Icons From Library引用這個(gè)網(wǎng)站上的一些現(xiàn)成圖標(biāo)陌宿。
2 素材添加完成后，點(diǎn)擊右下角Font F按鈕進(jìn)入屬性設(shè)置頁(yè)面波丰。
3 點(diǎn)擊Preferences按鈕壳坪，進(jìn)行字體屬性設(shè)置。
這里我們可以設(shè)置字體的名稱掰烟，字體樣式名稱爽蝴，以及對(duì)瀏覽器的兼容性
4 下載字體文件及demo，點(diǎn)擊頁(yè)面右下方的Download按鈕打包下載所有資源纫骑。
5 解壓下載后的壓縮包蝎亚，可以得到以下的文件夾 其中包括demo，style.css 及fonts文件中的字體文件就是我們要的先馆。使用時(shí)发框，一起拷貝到我們的項(xiàng)目中即可。
C 在項(xiàng)目中引用
1 將所要用的css 及字體文件放到一個(gè)文件夾中煤墙。
2 在index.html 中引入我們的css缤底。
3 在需要的頁(yè)面引用，直接加到相應(yīng)標(biāo)簽的class屬性中番捂，作為樣式引用即可。
至此江解，Class is over设预！從此以后，UI再也不用擔(dān)心你煩她了犁河！
