一、下載
1顷编、到阿里圖標(biāo)矢量庫(kù)下載所需的圖標(biāo)
二像捶、使用
1、在Vue項(xiàng)目中新建一個(gè)文件夾(如在static下建一個(gè)iconfont文件夾)桂对。</br>
2、將下載的文件解壓后把iconfont.xxx的文件全拷貝到iconfont文件下鸠匀。</br>
3蕉斜、然后在main.js全局引用
import 'static/iconfont/iconfont.css'
4、使用方法
<i class="iconfont iconfont-name"></i>
5缀棍、有時(shí)候動(dòng)態(tài)引用時(shí)不方便寫(xiě)class可以用下面的方法
<template>
<div v-for="item in list">
<i class="iconfont" v-html="item.icon"></i>
</div>
</template>
<script>
export default{
data:{
list=[
{icon:''},
{icon:''},
{icon:''},
]
}
}
</script>
list中icon的值可以在iconfont.css中看到
iconfont.css
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-yulan:before { content: "\e613"; }
.icon-tuichuquanping:before { content: "\e79d"; }
注意:
使用時(shí)可能或報(bào)錯(cuò)提示缺少css-loader依賴宅此,執(zhí)行下面語(yǔ)句即可
npm install css-loader --save