快捷導(dǎo)航

vant自定義引入iconfont圖標(biāo)及字體的方法步驟

更新時(shí)間：2023年09月22日 16:48:47 作者：我媽已經(jīng)三天沒打我了

因?yàn)関antUI給的圖標(biāo)非常少,為了滿足自己的需求,就應(yīng)該找到一種方法來向vant添加自己自定義的圖標(biāo),對于自定義圖標(biāo)我第一時(shí)間想到的就是阿里的iconfont矢量圖庫,這篇文章主要給大家介紹了關(guān)于vant自定義引入iconfont圖標(biāo)及字體的方法步驟,需要的朋友可以參考下

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

點(diǎn)擊資源管理—>我的項(xiàng)目 —>新建項(xiàng)目

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

第二步：把項(xiàng)目下載到本地，解壓

然后把 iconfont.css 復(fù)制到項(xiàng)目的 assets/css 文件夾中（并且修改代碼路徑），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夾中。并且在main.js中引入

?。。。?nbsp;修改 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)已展示

?。?！最后說兩句，每次在項(xiàng)目里面新添加圖標(biāo)，項(xiàng)目包下載下來記得替換 iconfont.css ，iconfont.ttf，iconfont.woff，iconfont.woff2這三個(gè)文件，修改 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" rel="external nofollow" ></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(jī)號' }]"
      />
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲?yàn)證碼' }]"
      />
      <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(jī)號' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲?yàn)證碼' }]"
      >
      <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>