因為vantUI給的圖標(biāo)非常少，為了滿足自己的需求，必須自定義圖標(biāo)，這里分享一種vant引入阿里的iconfont矢量圖庫中的圖標(biāo)的方法

第一步：去阿里矢量庫下載圖標(biāo)

點擊資源管理—>我的項目 —>新建項目

?在首頁搜索需要的圖標(biāo)添加至自己的項目中

?第二步：把項目下載到本地，解壓，然后把iconfont.css復(fù)制到項目的assets/css文件夾中（并且修改代碼路徑），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夾中。并且在main.js中引入

?

??。。?！?修改iconfont.css里面的路徑（全部要改，這里只是展示改完和未改的區(qū)別）

?第三步：使用（只需要到iconfont.css中找到你需要的圖標(biāo)class名復(fù)制?。。∫獜?fù)制iconfont和你需要的圖標(biāo)）在main.js中引入

import './assets/css/common/iconfont.css'

<div>
   <i class="iconfont wticon-riqi"></i>
</div>

圖標(biāo)已展示?

?。?！最后說兩句，每次在項目里面新添加圖標(biāo)，項目包下載下來記得替換iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2這三個文件，修改iconfont.css里面的路徑以上的

以上的方法出現(xiàn)在瀏覽器上圖標(biāo)是黑色的，如果需要彩色的圖標(biāo)

在main.js中導(dǎo)入iconfont.js文件

import './assets/js/iconfont.js'

代碼方式不能是span，div，i等標(biāo)簽，而是有專屬的標(biāo)簽

    <div>
     //黑白色的圖標(biāo)
      <i class="iconfont wticon-riqi"></i>

     //彩色的圖標(biāo)
     //svg下的class名是iconfont，use下的class名是#+圖標(biāo)名
      <svg class="iconfont">
         <use xlink:href="#wticon-riqi"></use>
      </svg>
    </div>

在vant組件中使用圖標(biāo)

替換vant圖庫中的圖標(biāo)，需要用到插槽

原本寫法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用戶名"
        placeholder="用戶名"
        :rules="[{ required: true, message: '請?zhí)顚懯謾C號' }]"
      />
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

添加圖標(biāo)插槽的寫法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用戶名"
        placeholder="用戶名"
        :rules="[{ required: true, message: '請?zhí)顚懯謾C號' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-jiesuo"></i>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-662582.html

到了這里，關(guān)于vant自定義引入iconfont圖標(biāo)以及字體的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！