vue文件使用iconfont解析
vue使用iconfont
1、導(dǎo)入字體文件到assets中
2、main.js 導(dǎo)入
import '@/assets/icon/iconfont.css';
3、使用
注意前面一定要加iconfont，否則是個(gè)空框框
<div class="iconfont icon-label"></div>
項(xiàng)目中正確使用iconfont
1、打開(kāi) iconFont官網(wǎng) 選擇自己喜歡的圖標(biāo)，并且添加購(gòu)物車
2、點(diǎn)擊購(gòu)物車，添加至項(xiàng)目
3、下載至本地
4、把我們下載好的文件iconfont.css和iconfont.ttf放到項(xiàng)目assets文件夾下（可創(chuàng)建一個(gè)css文件或iconfont文件）
5、在main.js中引入iconfont.css樣式
import './assets/iconfont/iconfont.css'
6、在在vue文件中引用
<i class="iconfont icon-zitigui-xianxing"></i>
7、假如報(bào)錯(cuò)，需要下載css-loader依賴包
npm install css-loader --save
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開(kāi)發(fā)實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開(kāi)發(fā)實(shí)現(xiàn)過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue中前后端使用WebSocket詳細(xì)代碼實(shí)例
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)
這篇文章主要介紹了Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)2022-08-08
vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開(kāi)發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下2023-08-08
vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷方法示例
組件是我們學(xué)習(xí)vue必須會(huì)的一部分，下面這篇文章主要給大家介紹了關(guān)于Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3.0實(shí)現(xiàn)無(wú)限級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了基于Vue3.0實(shí)現(xiàn)無(wú)限級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
快速了解Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法
這篇文章主要介紹了Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07