iview中使用iconfont離線圖標字體資源

 

最近項目中要使用離線圖標字體，項目是基於iview+typescript的。現將怎麼使用離線圖標字體進行如下說明：

1. 進入官方圖標庫

打開圖標網站https://www.iconfont.cn/，進入官方圖標庫

 

 

1. 選擇所需圖標

選擇需要的圖標，支持不同的圖標庫多選

 

 

1. 保存所選圖標

點擊購物車，進入本次所選所有的圖標

 

 

 

4.下載圖標離線字體資源包

 

對當前所選擇的素材進行下載，有“下載素材”、“下載代碼”、“添加至項目”3種

 

下載素材是將圖標以“SVG、AI、PNG”後綴的資源進行下載

 

下載代碼是將當前所選圖標的資源進行打包下載

 

添加至項目是先把多個圖標保存至“我發起的項目”新建的圖標項目，對圖標項目資源打包下載，也可以點擊所需的單個進行下載

我是將所有素材建個“頂天項目”進行保存，從“圖標管理”進入我發起的項目，點擊“下載至本地”，彈出下載地址選擇頁面，選擇好地址後，進行下載

 

 

5.解壓圖標離線字體資源包

找到download.zip壓縮包，解壓該壓縮包後，如下

 

6.在項目中引入圖標離線字體資源

在項目assets文件夾下創建iconfont文件夾，將下載後的離線圖標字體資源複製至改文件夾下

 

7.在項目中使用圖標離線字體資源

A.刪除項目main.less文件中原iconfont引入代碼

 

B.在項目main.vue文件中直接引用iconfont文件夾下iconfont.css樣式文件

 

 

C.打開iconfont文件夾下demo_index.html文件，如下：

 

如果想在界面中使用這個圖標“notice”

 

D.在demo_index.html中找到該圖標，複製“”

 

 

在對應代碼塊將圖標字體替換爲“”

 

E.按照上述步驟將其他圖標進行替換即可；

 

經測試，網絡離線狀態下也可以正常使用該圖標；