相信很多前端開發(fā)人員在項目開發(fā)過程中都會遇到這樣一個問題：頁面的圖標發(fā)生改動，需要往圖標文件中追加新的圖標，卻因為圖標文件已經(jīng)打包好而無從下手，重新制作一份圖標文件吧，要考慮替換整個項目的圖標，工程量太大，有一種牽一發(fā)而動全身的感覺，之所以會造成這種尷尬的局面呢，是因為項目開發(fā)初期對圖標管理沒有一個規(guī)范的解決方案。下面就和大家講解一下基于 Iconfont 的圖標管理方案。如果哪位大佬有更好的解決方案，可以一起探討一下！

Iconfont 是阿里巴巴出品的一個非常優(yōu)秀的矢量圖標庫，里面有很多的圖標，具體有多少呢，看它官網(wǎng)的計數(shù)器，反正一般開發(fā)工作中是夠用了，相信很多做設計、前端開發(fā)的小伙伴都有在用這個網(wǎng)站！

今天要說的就是它的圖標管理功能，我們可以對喜歡的圖標加入購物車，然后加入相應的項目中去。我們?yōu)槊恳粋€項目創(chuàng)建一個目錄，這樣當后期有圖標需要添加進來時，直接加在對應項目中，然背后重新生成圖標文件即可。

然后在我的項目頁面，可以對圖標進行下載，管理，上傳自定義圖標等，非常方便。

并且可以邀請成員加入項目或分享項目給他人。

每一個Web 項目從項目開發(fā)初期做好圖標管理，可以省去很多不必要的困擾。

其他問題

圖標對應格式的字體文件(例如 iconfont.woff2 )丟失，導致在安卓小程序上面圖標不顯示的解決方法：

找到一個能夠顯示的文件,比如 iconfont.ttf 然后使用下面網(wǎng)站進行格式轉(zhuǎn)換，需要轉(zhuǎn)換2步，先將 ttf 轉(zhuǎn)換成 woff2 ，然后再將 ttf2 轉(zhuǎn)換成 base64 。再寫入到 css 中

網(wǎng)址：https://transfonter.org/

將轉(zhuǎn)換后的 base64 碼寫入 css :

總結(jié)

以上是生活随笔為你收集整理的css引入矢量图标_WEB 项目开发中的图标管理解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。