vue項目引入Iconfont圖標(biāo)庫的教程圖解
在進(jìn)行項目開發(fā)過程中,vue項目中前端所使用的UI框架是element ui,但是element的字體圖標(biāo)庫不足以滿足日常開發(fā)的需要,或者公司項目要求使用本公司ui設(shè)計的圖標(biāo),都可以參考以下的步驟,
1. 在阿里圖標(biāo)庫中選中你想要的圖標(biāo)庫,并點擊進(jìn)去,
2. 注意: 我們在選擇圖標(biāo)是后,如果是需要多個圖標(biāo)就將選中的圖標(biāo)加入購物車,但是如果我們沒有在這一個圖標(biāo)庫中找到自己需要的圖標(biāo)時,可以去其他的圖標(biāo)庫中進(jìn)行選擇,但是要記住離開這個圖標(biāo)庫的時候,記得將選擇的圖標(biāo)加入自己創(chuàng)建的項目中,
不然去其他圖標(biāo)庫的時候,圖標(biāo)庫中會被清空,除非你從新進(jìn)入這一個圖標(biāo)庫中,
3. 選擇完成后,點擊右上角選擇購物車,
4. 進(jìn)入購物車頁面,然后點擊提交至項目中,因為我們是新建的項目,所以要先在圖標(biāo)庫中新建項目后,才能將以選中圖標(biāo)加入項目中,進(jìn)行保存,
5. 點擊添加后,進(jìn)入我的項目這個頁面,會顯示自己已經(jīng)選擇的圖標(biāo),在點擊下載到本地前,要注意配置一下圖表選項,
6. 點擊編輯選項;
7. 配置圖標(biāo)使用前綴,然后點擊保存,就可以下載到本地了,
8. 點擊下載到本地,并將下載的文件放入所開發(fā)的項目中去,
9. 將下載好的文件放入項目中去,首先在src下的assets項目新建一個文件夾,名字自己定義,注意要明了,建下載的文件放進(jìn)去就好的,然后就可以修改iconfont.css文件,修改完,才能進(jìn)行顯示,
[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內(nèi)容,
10. 在main.js引入iconfont.css文件,也就是剛剛我們修改的文件,這樣就不用每一個組件想用圖標(biāo)的時候都要引一遍了,
11. 在組件中使用新下載的圖標(biāo),
總結(jié)
以上所述是小編給大家介紹的vue項目引入Iconfont圖標(biāo)庫的教程圖解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期2022-08-08
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
下面小編就為大家分享一篇vue綁定的點擊事件阻止冒泡的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue2.x對象深層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了淺談Vue響應(yīng)式(數(shù)組變異方法)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
使用Vite+Vue3+Vant全家桶快速構(gòu)建項目步驟詳解
這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構(gòu)建項目步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show,本文通過實例圖文相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04