vant自定义引入iconfont图标以及字体-Toy模板网

这篇具有很好参考价值的文章主要介绍了vant自定义引入iconfont图标以及字体。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

因为vantUI给的图标非常少，为了满足自己的需求，必须自定义图标，这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法

第一步：去阿里矢量库下载图标

点击资源管理—>我的项目 —>新建项目

在首页搜索需要的图标添加至自己的项目中

vant使用iconfont,vant组件,前端,vue.js,javascript

第二步：把项目下载到本地，解压，然后把`iconfont.css`复制到项目的`assets/css`文件夹中（并且修改代码路径），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夹中。并且在main.js中引入

vant使用iconfont,vant组件,前端,vue.js,javascript

！！！！修改iconfont.css里面的路径（全部要改，这里只是展示改完和未改的区别）

vant使用iconfont,vant组件,前端,vue.js,javascript

第三步：使用（只需要到iconfont.css中找到你需要的图标class名复制！！！要复制iconfont和你需要的图标）在main.js中引入

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

vant使用iconfont,vant组件,前端,vue.js,javascript

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

图标已展示

vant使用iconfont,vant组件,前端,vue.js,javascript

！！！最后说两句，每次在项目里面新添加图标，项目包下载下来记得替换iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2这三个文件，修改iconfont.css里面的路径以上的

以上的方法出现在浏览器上图标是黑色的，如果需要彩色的图标

在main.js中导入iconfont.js文件

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

代码方式不能是span，div，i等标签，而是有专属的标签

    <div>
     //黑白色的图标
      <i class="iconfont wticon-riqi"></i>

     //彩色的图标
     //svg下的class名是iconfont，use下的class名是#+图标名
      <svg class="iconfont">
         <use xlink:href="#wticon-riqi"></use>
      </svg>
    </div>

在vant组件中使用图标

替换vant图库中的图标，需要用到插槽

原本写法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

添加图标插槽的写法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写手机号' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
      <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>

vant使用iconfont,vant组件,前端,vue.js,javascript