關(guān)于Vue中使用alibaba的iconfont矢量圖標(biāo)的問題
網(wǎng)上有很多引入方法，官方也給出了三種引入方法，但是大多數(shù)人引入后都不會(huì)顯示，或者是不能自定義樣式，下面這種方法不會(huì)存在上面的那些問題，是目前最好的引入方式。
1、網(wǎng)址 阿里巴巴矢量圖庫 ，要求登陸后使用，先注冊(cè)登錄吧
2、登陸后，搜索想要的圖標(biāo)，比如用戶、購物車什么的
3、鼠標(biāo)移動(dòng)到想要的圖標(biāo)上，點(diǎn)擊“添加入庫”，建議不要直接用復(fù)制SVG代碼引入或者其他引入方式，先加入庫在下載下來是最好的選擇。
4、打開網(wǎng)址右上角的購物車，將所選的圖標(biāo)“添加至項(xiàng)目”
5、下載至本地，會(huì)得到一個(gè)壓縮包，解壓到當(dāng)前文件夾
6、會(huì)出現(xiàn)這些內(nèi)容，將除了demo開頭的所有文件全部復(fù)制進(jìn)項(xiàng)目的“asset”文件夾下的“iconfont”文件夾，沒有的話自己新建文件夾
7、接下來用瀏覽器打開解壓出來的文件夾里的demo_index.html，這些代碼就是對(duì)應(yīng)的每個(gè)圖標(biāo)，等下要用到
8、在代碼中這樣寫，你的項(xiàng)目網(wǎng)頁就會(huì)顯示第一個(gè)圖標(biāo)，上圖==  ==對(duì)應(yīng)的那個(gè)圖標(biāo)
<template>
<span class="iconfont"></span>
<template>
<script>
import '../asset/iconfont/iconfont.css'; //這里是你的iconfont.css路徑，和我的可能不一
</script>
9、要修改圖標(biāo)樣式，就在style標(biāo)簽里修改.iconfont類就可以了
<template>
<span class="iconfont"></span>
<template>
<script>
import '../asset/iconfont/iconfont.css'; //這里是你的iconfont.css路徑，和我的可能不一
</script>
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
10、結(jié)束，在哪個(gè)頁面使用圖標(biāo)就在哪個(gè)頁面先 import '../asset/iconfont/iconfont.css'; 一下就可以了
11、注意，如果還想從阿里矢量圖庫新添加一些圖標(biāo)，則需要?jiǎng)h除項(xiàng)目里的iconfont文件夾，重新從本文章第2步開始，選擇，下載，引入
到此這篇關(guān)于Vue使用alibaba的iconfont矢量圖標(biāo)的文章就介紹到這了,更多相關(guān)Vue矢量圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Upload?上傳文件這個(gè)功能是我們?cè)谄髽I(yè)實(shí)際開發(fā)當(dāng)中使用頻率是非常高的這樣一個(gè)文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧2024-02-02
vuejs 動(dòng)態(tài)添加input框的實(shí)例講解
今天小編就為大家分享一篇vuejs 動(dòng)態(tài)添加input框的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果
這篇文章主要給大家介紹了關(guān)于vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果的相關(guān)資料,文中還給大家介紹了vue3實(shí)現(xiàn)某一個(gè)元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue組件間的參數(shù)傳遞 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了在Vant的基礎(chǔ)上封裝下拉日期控件的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue中el-table和jsplumb實(shí)現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue中使用el-dropdown方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
vue3中的watch和watchEffect實(shí)例詳解
watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3中watch和watchEffect的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05