vant怎么使用自己准备的字体图标

第一步准备好字体图标
以阿里巴巴矢量字体图标库为例
https://www.iconfont.cn/
将下载好的文件放入src/assets目录下(位置不是固定的,看你心情,记住路径,一会还要导入main.js)

第二步,将字体图标引入main.js _____________(重要步骤)

// 在main.js 导入字体图标
import './assets/fonts/iconfont.css'

第三步,选择字体图标

第四部,使用

<span class="iconfont icon-home">原生标签:首页(字体图标大小20)</span>

<template>
  <div class="Layout-container">
    <div class="home_container">

      <!-- 第一种原生标签使用   >>>>字体大小要在iconfont.css中更改-->
      <span class="iconfont icon-home">原生标签:首页(字体图标大小20)</span>
      <br />

      <!-- 第二种在vant标签中使用-->
      <van-icon class="iconfont icon-gouwuche1" size="40" />
      vant标签中使用<br />

      <router-view></router-view>
    </div>

    <!-- 底部导航栏 -->
    <!-- 第三种,van-tabbar中使用 -->
    <van-tabbar v-model="active">
      <van-tabbar-item class="iconfont icon-gouwuche1">购物车</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-wode1">我的</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      active: 0
    }
  }
}
</script>
<style scoped lang="less">
.van-tabbar-item {

//
///* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
//
  /deep/ .van-tabbar-item__text {
    font-size: 12px;
  }

}
</style>

效果图如下

总结;重要步骤是给标签加上 calss类名