快捷導(dǎo)航

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

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

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

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

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

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

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

然后把 iconfont.css 復(fù)制到項(xiàng)目的 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)已展示

?。。∽詈笳f(shuō)兩句，每次在項(xiàng)目里面新添加圖標(biāo)，項(xiàng)目包下載下來(lái)記得替換 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)簽，而是有專(zhuān)屬的標(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圖庫(kù)中的圖標(biāo)，需要用到插槽

原本寫(xiě)法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用戶(hù)名"
        placeholder="用戶(hù)名"
        :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)' }]"
      />
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)驗(yàn)證碼' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

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

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用戶(hù)名"
        placeholder="用戶(hù)名"
        :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)驗(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>