在進行項目開發過程中,vue項目中前端所使用的UI框架是element ui,但是element的字體圖標庫不足以滿足日常開發的需要,或者公司項目要求使用本公司ui設計的圖標,都可以參考以下的步驟,

1. 在阿里圖標庫中選中你想要的圖標庫,并點擊進去,

2. 注意: 我們在選擇圖標是后,如果是需要多個圖標就將選中的圖標加入購物車,但是如果我們沒有在這一個圖標庫中找到自己需要的圖標時,可以去其他的圖標庫中進行選擇,但是要記住離開這個圖標庫的時候,記得將選擇的圖標加入自己創建的項目中,

不然去其他圖標庫的時候,圖標庫中會被清空,除非你從新進入這一個圖標庫中,

3. 選擇完成后,點擊右上角選擇購物車,

4. 進入購物車頁面,然后點擊提交至項目中,因為我們是新建的項目,所以要先在圖標庫中新建項目后,才能將以選中圖標加入項目中,進行保存,

5.  點擊添加后,進入我的項目這個頁面,會顯示自己已經選擇的圖標,在點擊下載到本地前,要注意配置一下圖表選項,

6. 點擊編輯選項;

7. 配置圖標使用前綴,然后點擊保存,就可以下載到本地了,

8. 點擊下載到本地,并將下載的文件放入所開發的項目中去,

9.  將下載好的文件放入項目中去,首先在src下的assets項目新建一個文件夾,名字自己定義,注意要明了,建下載的文件放進去就好的,然后就可以修改iconfont.css文件,修改完,才能進行顯示,

[class^="el-icon-third"], [class*=" el-icon-third"]/*這里有空格*/{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

上面是要替換的css內容,

10.  在main.js引入iconfont.css文件,也就是剛剛我們修改的文件,這樣就不用每一個組件想用圖標的時候都要引一遍了,

11.  在組件中使用新下載的圖標,

總結

以上所述是小編給大家介紹的vue項目引入Iconfont圖標庫的教程圖解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！