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