vant自定义引入iconfont图标及字体的方法步骤
因为vantUI给的图标非常少,为了满足自己的需求,必须自定义图标,这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法
第一步:去阿里矢量库下载图标
点击资源管理—>我的项目 —>新建项目
在首页搜索需要的图标添加至自己的项目中
第二步:把项目下载到本地,解压
然后把 iconfont.css
复制到项目的 assets/css
文件夹中(并且修改代码路径),iconfont.ttf,iconfont.woff,iconfont.woff2放到新建的fonts文件夹中。并且在main.js中引入
!!!! 修改 iconfont.css里面的路径( 全部要改,这里只是展示改完和未改的区别 )
第三步:使用(只需要到 iconfont.css中找到你需要的图标class名复制!!!要复制iconfont和你需要的图标 )在main.js中引入
import './assets/css/common/iconfont.css'
<div> <i class="iconfont wticon-riqi"></i> </div>
图标已展示
!!!最后说两句,每次在项目里面新添加图标,项目包下载下来记得替换 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" rel="external nofollow" ></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引入iconfont图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下2018-02-02Nuxt项目支持eslint+pritter+typescript的实现
这篇文章主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05报错[vuex] unknown action type: userLogin问
这篇文章主要介绍了报错[vuex] unknown action type: userLogin问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06
最新评论