在手機(jī)端網(wǎng)頁開發(fā)中，由于扁平化設(shè)計(jì)的流行，以及設(shè)備屏幕越來越細(xì)膩高清，“小而精”的字形圖標(biāo)逐漸成為手機(jī)端頁面的標(biāo)配。
那么如何高效，便捷的管理使用自己項(xiàng)目的圖標(biāo)呢？
拋磚引玉，下面筆者介紹下如何通過 icomoon 這個強(qiáng)大的字形圖標(biāo)網(wǎng)站管理自己項(xiàng)目的圖標(biāo)庫。
為什么是 icomoon
使用一年多來，尚未找到比它更好用的圖標(biāo)網(wǎng)站了。
- 優(yōu)點(diǎn)
- 支持上傳自定義圖標(biāo)，包括多色塊圖標(biāo)
- 當(dāng)然，你也可以挑選線上他人共享的圖標(biāo)
- 支持在線對圖標(biāo)進(jìn)行編輯
- 將所有選擇的圖標(biāo)合成一個圖標(biāo)文件，類似“雪碧圖”功能，并可以本地預(yù)覽。
- 缺點(diǎn)
- 圖標(biāo)可以保存該網(wǎng)站的云端上，不過這是一個付費(fèi)服務(wù)。（如果沒有開啟該服務(wù)，你在該網(wǎng)站上收集或者上傳的圖標(biāo)會自動保存在瀏覽器的緩存中，這極大的方便了圖標(biāo)管理，但終究有誤清緩存的隱患，所以筆者強(qiáng)烈建議，如果你沒有開啟該服務(wù)，可以將生成的圖標(biāo)壓縮包保存在其他免費(fèi)云端上，比如coading，github，云盤，有道云筆記等等）
如何開始
很多時候，為了統(tǒng)一網(wǎng)站風(fēng)格，字形圖標(biāo)需要設(shè)計(jì)師同學(xué)通過AI或者PS來制作，然后導(dǎo)出一個SVG文件。（一般來講，制作圖標(biāo)的時候，如果沒有特殊需求，圖標(biāo)顏色是純黑色(#000)的，畫布是一個正方形，圖標(biāo)與畫布水平垂直居中，并且圖標(biāo)邊緣與畫布上下邊界或者左右邊界貼邊。）
-
這個SVG文件可以直接用瀏覽器打開預(yù)覽，然后我們把圖標(biāo)傳上去(上傳后，如果圖標(biāo)異常，說明制作有問題，需要設(shè)計(jì)師重新制作），
如果圖標(biāo)不符合規(guī)范，比如沒有水平垂直居中，沒有貼邊等，我們可以在線修改使其符合要求。
step-1.gif -
當(dāng)然，我們也可以上傳多色圖標(biāo)以及挑選一些別人共享的免費(fèi)圖標(biāo)
step-2.gif -
選擇好圖標(biāo)后，可以在線生成我們的圖標(biāo)文件了（一個包含本地預(yù)覽的壓縮包，解壓后打開文件中的 demo.html 即可本地預(yù)覽）
step-3.gif -
解壓之后，把文件夾 fonts 以及 style.css 復(fù)制到我們的項(xiàng)目中，一般使用 i 標(biāo)簽，通過添加圖標(biāo)類名，即可渲染出對應(yīng)圖標(biāo)
step-4.gif -
如果要渲染多色圖標(biāo)，比如本次演示使用的紅包圖標(biāo)，在生成的字形類名中，與其他或字形類名相比，它多出若干子類名，path1，path2，path3等，根據(jù)子類名的數(shù)量，你需要在紅包標(biāo)簽中引入相應(yīng)的子標(biāo)簽（筆者習(xí)慣使用span，注意，子標(biāo)簽不要換行，否則圖標(biāo)異常）
step-5.gif -
最后，如果你清除了瀏覽器緩存，并且你未購買網(wǎng)站的云服務(wù)，那么當(dāng)你再次訪問該網(wǎng)站時候，你辛苦收集的圖標(biāo)將不復(fù)存在。怎么辦呢，你可以通過導(dǎo)入之前字形文件中的
selection.json來完美（如果你的圖標(biāo)庫全部是單色圖標(biāo)，也可以導(dǎo)入fonts 中的 svg 文件，如果包含多色圖標(biāo)，則必須導(dǎo)入 selection.json 才能完美恢復(fù)）恢復(fù)到線上。所以，再次聲明，如果你未購買該網(wǎng)站的云服務(wù)，一定要把生成的字形圖標(biāo)壓縮包保存到其他免費(fèi)云盤中
step-6.gif
結(jié)語
- 雖然圖標(biāo)支持多色塊，甚至漸變，但是依舊 建議適當(dāng)使用多色，避免使用漸變。（筆者曾遇到過設(shè)計(jì)師同學(xué)制作了一個超炫酷的圖標(biāo)，各種顏色，漸變，竟然有300k之巨），如果單個圖標(biāo) svg 文件超過20k，就應(yīng)該考慮做成 png 了。
- 這個網(wǎng)站其實(shí)還有很多輔助功能，這里不再贅述，大家自行探索，歡迎討論交流。
