UI姑娘在PS里面畫好的圖標(biāo)，前端拿下來要么是 .jpg 格式要么是 .png 格式仓手，當(dāng)然也有 .gif 或者別的你們喜歡的格式胖齐。在html頁面制作時玻淑，用引入圖標(biāo)的方式，做圖標(biāo)呀伙。一般可點擊的按鈕补履，其圖標(biāo)有選中狀態(tài)和普通狀態(tài)，那就有兩種顏色剿另，那么同一個圖標(biāo)就要準(zhǔn)備兩個圖片箫锤，然后合并成一張圖，減少請求次數(shù) ====
時間久了雨女，我就嫌煩了谚攒；
我也會用iconfont字體圖標(biāo)，畢竟方便好用氛堕，改色改大小五鲫，秒秒鐘完成〔砝蓿可是位喂，畫圖的人畫的圖標(biāo)總是有她自己的腔調(diào)，我的UI也是在iconfont里面找到對應(yīng)的圖標(biāo)乱灵，下載時選擇 .png 格式塑崖，導(dǎo)入ps再追加她覺得好看的元素進(jìn)去。這樣我就沒法在iconfont找到一模一樣或者十分接近的圖標(biāo)直接下載使用痛倚。
可是规婆，為了解放生產(chǎn)力。我還是尋到了一個解決方案蝉稳，也是抄襲別人的網(wǎng)上教程抒蚜，但是我每次看到別人的教程總是覺得不夠詳細(xì)，這也是我重復(fù)寫下這份文檔的原因耘戚。
注意事項：我這里用到的字體圖標(biāo)只支持單色圖標(biāo)嗡髓，就是一個圖標(biāo)的所有線條都是同一種顏色，我沒有研究彩色圖標(biāo)的實現(xiàn)收津，iconfont官網(wǎng)有彩色圖標(biāo)的介紹饿这，然而，我并沒有仔細(xì)研究撞秋。
字體圖標(biāo)適用場景：可能需要改色的长捧，整個項目里圖標(biāo)數(shù)量繁多的，適用于單色純色圖標(biāo)的吻贿。
第一步串结，取素材。
? ? ? ? 從PSD設(shè)計圖上取下素材，png格式透明底的圖片肌割；
? ? ? ? 打開?https://www.vectorizer.io/ 這個網(wǎng)站相當(dāng)卡（我公司網(wǎng)絡(luò)一般赵抢，所以開了半天），需要耐心等待網(wǎng)站完全開好
? ? ? ? 打開網(wǎng)站后声功，找到頁面中間靠左位置的 Upload Images 藍(lán)色底白色字的按鈕，點擊上傳圖片宠叼，然后看到右側(cè)預(yù)覽圖片下方有幾個按鈕先巴，找到一個 Download 藍(lán)色底白色字的按鈕，然后你就得到了你的svg素材冒冬。
第二步伸蚯，打開iconfont官網(wǎng)找到上傳入口，上傳你在第一步獲得的svg文件简烤，然后添加到項目啊什么什么的就可以下載資源包了剂邮，字體圖標(biāo)就完成了。目前我只是簡單測試横侦，基本走通了流程挥萌，還沒有實際運用的實際項目中。
關(guān)于第一步枉侧，注意引瀑，如果你沒有找到我說的那些按鈕什么的，那絕對是你網(wǎng)絡(luò)卡榨馁，網(wǎng)頁沒有完整打開憨栽。我也發(fā)現(xiàn)打開網(wǎng)頁卡，上傳圖標(biāo)轉(zhuǎn)換的過程也比較卡翼虫，也比較耽誤時間屑柔。至于是否用這種方式，看你取舍吧珍剑。
