600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Vant UI使用iconfont自定义图标

Vant UI使用iconfont自定义图标

时间:2020-11-09 19:04:47

相关推荐

Vant UI使用iconfont自定义图标

在使用Vant UI做h5页面时,不可避免的会使用到各种小图标,但是Vant 官方提供的图标是有限的,考虑到这种情况,vant也提供了一种方法去自定义图标,自定义图标。可能有些同学看到这里也是一头雾水,下面有详细的教程

iconfont

让我们的UI设计小姐姐将图标上传到iconfont

注意,我们尽量让UI小姐姐将图标的前缀统一,点击右上角的 “项目设置”

下载项目

将项目下载到本地,将文件 iconfont.css 和iconfont.ttf文件放入项目文件夹/assets/icon_font

配置 main.js

在main.js 中引入iconfont.css

import './assets/icon_font/iconfont.css';

使用

<!-- 通过 class-prefix 指定类名为 icon --><van-icon class-prefix="icon" name="icon_function_chuku" color="#000000" size="35" /><van-icon class-prefix="icon" name="chukuguanli" color="#000000" size="35" />

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。