vant 引入其他图标

1.进入iconfont官网查找需要的图标

iconfont-阿里巴巴矢量图标库

2.找到需要的图标添加进入购物车

3.如果需要的图标比较多可以选择（添加至项目）方便管理。

4.选择下载代码（会下载为一个压缩包）

5.解压缩后得到文件夹

6.在项目中 src下的assets新建iconfont文件夹放入解压好的文件

iconfont.css文件

7.在main.js中引入iconfont.css文件

import '../src/assets/iconfont/iconfont.css';
import { Icon } from 'vant';
Vue.use(Icon)

8.在项目中应用 vant 的icon图标

（可以参考vant官网的教程 Vant 2 - Mobile UI Components built on Vue）

class-prefix 类名前缀，用于使用自定义图标

class 对应iconfont.css中的font-family

//引入的iconfont图标应用
<van-icon class="iconfont icon-NumberCircleOne" class-prefix='icon' name='icon-NumberCircleOne' />
<van-icon class="iconfont icon-NumberCircleSeven" class-prefix='icon' name='icon-NumberCircleSeven' />
<van-icon class="iconfont icon-wenhao" class-prefix='icon' name='icon-wenhao' />
//vant组件库的图标应用
<van-icon name="user-o" />

效果

vant 引入其他图标相关推荐

vant 引入 iconfont 图标，图标变形，图标斜斜歪了
直接上图仔细审查一便当前图标的样式,发现没有自己写的CSS样式导致图标变形,最后检查发现元素有个一个 font-style 为 italic的样式,才恍然大悟,这是斜体的样式,vant 插入图标使用 ...
vue移动端ui框架vant如何自定义引入阿里巴巴图标库
vant如何自定义引入阿里巴巴图标库框架虽然本身有提供部分icon,但是很多时候都无法满足我们得需要,这个时候我们就需要自定义引入icon,这里我是使用的阿里巴巴图标库. 首先,我们先打开阿里巴巴图 ...
vant自定义引入iconfont图标以及字体
因为vantUI给的图标非常少,为了满足自己的需求,必须自定义图标,这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法第一步:去阿里矢量库下载图标点击资源管理->我的项目 ...
vue的vantUI引入外部图标
前言在查找怎么引入外部图标的时候,发现对于一些细节他们的文章描述的并不清楚.因此打算自己对自己是如何用vantUI引入外部图标的方法进行一个整理:同时,虽然是引入vantUI的外部图标,但是方法都是 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...

vant 引入其他图标

vant 引入其他图标相关推荐

最新文章

热门文章