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