vue中使用iconfont圖標(biāo)的過(guò)程
vue引入iconfont圖標(biāo)
引入在線鏈接文件
如果開(kāi)發(fā)過(guò)程中需要不斷更新圖標(biāo)，為了避免多次下載文件到本地，可以先選擇使用在線鏈接的圖標(biāo)文件
前面的步驟就不贅述了，直接講如何在vue中引入
查看項(xiàng)目在線鏈接
我 選的是 Unicode 的形式
在項(xiàng)目中的 assets/css 文件夾下新建 global.css 文件，復(fù)制剛才生成的 font-face 代碼，如何定義iconfont 類
@font-face {
...
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
在 main.js 中引入 css 文件
... import './assets/css/global.css' ...
使用
<i class="iconfont"></i> // Unicode格式
vue使用iconfont多色圖標(biāo)
1.新建一個(gè)項(xiàng)目，用于存放該項(xiàng)目應(yīng)用的所有圖標(biāo)，項(xiàng)目名稱自定義。
2.挑選自己心儀的圖標(biāo)，并點(diǎn)擊添加入庫(kù)
3.點(diǎn)擊導(dǎo)航欄上的“購(gòu)物車”圖標(biāo)，查看自己添加入庫(kù)的圖標(biāo)，并添加至項(xiàng)目
4.進(jìn)入自己的項(xiàng)目庫(kù)，選擇symbol 引用，點(diǎn)擊查看在線鏈接
5.在vue項(xiàng)目中新建一個(gè)js文件，文件名自定義，將點(diǎn)擊的在線鏈接里面的內(nèi)容全部復(fù)制到j(luò)s文件中
6.在main.js中全局引用該js文件
7.將icon圖標(biāo)放至相應(yīng)的位置，用css樣式width、height可調(diào)整icon大小
<svg class="icon" aria-hidden="true" style="width:15px;height:15px;"> ????????<use xlink:href="#icon-wancheng" rel="external nofollow" ></use> </svg>
8.后續(xù)若添加新的icon圖標(biāo)至該項(xiàng)目，點(diǎn)擊此處紅字更新代碼，進(jìn)入在線鏈接全部復(fù)制后，將剛才的創(chuàng)建的js文件內(nèi)容全部替換，無(wú)需再進(jìn)行全局引入，將心儀的icon圖標(biāo)放至相應(yīng)位置即可，代碼格式詳見(jiàn)第七條
9.呈現(xiàn)效果如下圖
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請(qǐng)求或響應(yīng)數(shù)據(jù)時(shí)對(duì)其進(jìn)行一些處理或修改,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vant框架van-cell插槽無(wú)法換行問(wèn)題及解決
這篇文章主要介紹了vant框架van-cell插槽無(wú)法換行問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的方法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的相關(guān)資料,文中通過(guò)代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
這篇文章主要分享可編寫 Vue v-for 循環(huán)的 7 種方式，在Vue中，基本上每個(gè)項(xiàng)目都會(huì)用到v-for循環(huán)。它們?cè)试S你在模板代碼中編寫for循環(huán)，接下來(lái)一起看看下面文章的詳細(xì)介紹吧2021-12-12
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
使用 filters 實(shí)現(xiàn)英文字母轉(zhuǎn)大寫，實(shí)現(xiàn)代碼超簡(jiǎn)單，本文重點(diǎn)給大家介紹vue filters的使用，感興趣的朋友一起看看吧2018-06-06
使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)的實(shí)現(xiàn)
本文主要介紹了使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程
在微信小程序中,可以很簡(jiǎn)單的分享一個(gè)頁(yè)面,比微信H5簡(jiǎn)單多了,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程,需要的朋友可以參考下2023-02-02