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

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

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

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

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

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

其他問題

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

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

網址：https://transfonter.org/

將轉換后的 base64 碼寫入 css :

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。