vant表单组件+iconfont组合使用 - 代码篇

原创

已于 2022-03-10 16:45:07 修改 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

文章标签：

#vue.js

于 2020-06-27 22:39:22 首次发布

本文详细介绍了如何在Vant框架中结合Iconfont，通过引用和调用字体文件，实现表单组件的自定义图标应用。提供具体代码案例，展示了三种不同风格的图标集成方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vant框架的 `form表单组件`、`iconfont` , 组合使用案例。

案例截图

在这里插入图片描述

引用 · 字体文件：

vantUI 自定义引入iconfont图标（3种风格）- 案例篇

调用 · 字体文件：

templete代码：

<van-cell-group>
	 <!-- 手机号码 -->
	 <van-field
	   v-model="username"
	   clearable
	   type="tel"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

草巾冒小子

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

移动端项目（vue2+vant组件库）

qq_45585640的博客

06-23

8044

在命令行中输入以下命令创建 Vue 项目：这里建议两个都选上，更严谨。这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如

uniapp+vant weapp实现课程表小程序_课程表功能的实现

Kätzchen-408的博客

06-01

2291

课程表功能的实现思路1.节数与天数和grid内单选框索引的转换2.单选框样式的魔改温馨提示:尽量用原生源码思路课程表的实现,我想了很久,在没有现成组件库的情况下实现,我主要是用了vant weapp的宫格和单选框来实现主要的难点有以下两个方面: 1.节数与天数和grid内单选框索引的转换返回值给我一个包含课程节数和天数的对象数组,我把它转换成一个包含unit(5节课*7天的对应的数字来定位)的对象数组 2.单选框样式的魔改单选框直接使用radio的插槽来贴图来适应样式需求 <van-radio

参与评论您还未登录，请先登录后发表或查看评论

Vant UI使用iconfont自定义图标

前端三疯的博客

06-21

2268

在使用Vant UI做h5页面时，不可避免的会使用到各种小图标，但是Vant 官方提供的图标是有限的，考虑到这种情况，vant也提供了一种方法去自定义图标，自定义图标。可能有些同学看到这里也是一头雾水，下面有详细的教程 iconfont 让我们的UI设计小姐姐将图标上传到iconfont 注意，我们尽量让UI小姐姐将图标的前缀统一，点击右上角的 “项目设置” 下载项目将项目下载到本地，将文件 iconfont.css 和iconfont.ttf文件放入项目文件夹/assets/icon_font 配置

微信小程序开发(第四天)-引入vant插件，引入iconfont，地图页面车辆等按钮优化

梁白开的博客

09-08

1592

将iconfont.css文件改为iconfont.wxss并复制到小程序项目下assets/iconfont文件夹(若没有则新建)中。在需要的页面引用如index页面，index.json中添加以下代码。由于vant组件提供的icon图标不多，按照一位博主引入教程。在index.wxml可以使用iconfont了，如下。借鉴一位博主的保姆级教程，，引入iconfont。

Vue + Vant 上拉加载与下拉刷新案例模板分析

最新发布

weixin_42592399的博客

06-08

598

Vue.js 是一个轻量级的JavaScript框架，以其简单易用、灵活高效的特点迅速在前端开发领域崭露头角。Vue的核心库只关注视图层，同时易于上手，适合快速开发小型至中大型的Web应用。Vant 是一个轻量、可靠的移动端 Vue 组件库，专注于提供高质量、易用的 UI 组件。它遵循简单、直观、高性能的设计原则，旨在帮助开发者快速构建移动应用。

关于iconfont在vant组件中自定义的解决方案

qq_37978839的博客

09-16

2124

关于使用iconfont在vant-icon中的自定义我们知道，vant的组件虽然功能很强大，而且图标也很多，但是我们还是会发现它的图标库并不能满足我们所有的需要，所以我写了这篇博客来记录如何在van-icon中自定义图标在vant的官方文档icon图标这章有一个属性是class-prefix,官方文档的解释是自定义图标时进行应用，那么这个究竟是什么意思呢。当我们使用van-icon中的只传入name值为plus时，我们在生成的dom树中查看，会发现他会生成一个i标签，并携带类名 <i class

Vant UI中使用iconfont实现自定义图标

weixin_43755104的博客

08-10

1369

Vant UI中使用iconfont实现自定义图标

Vant 使用 iconfont 自定义图标

qq_33160523的博客

11-24

3296

vant官方文档刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法一、到iconfont下新建一个项目 https://www.iconfont.cn/ 这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’- 二、把所需的图标加入的新建的项目选择对应图标加入购物车点击右上角购物车然后加入新建的项目下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo

vue2.0+vuex+router+vant+rem移动适配+字体图标+axios基础模板-推荐在这个模板上进行开发

03-30

4. **Vant**: Vant 是由有赞公司开源的一个轻量级的 UI 组件库，基于 Vue 2.0 设计，提供了丰富的组件集合，如按钮、表单、网格、布局等，可以帮助快速构建移动端项目，具有高性能和高度定制化的特性。 5. **移动端...

totoro-vue：Totoro商城Vue移动端（SpringBoot + Vue前分离分离全栈开发）

02-04

【Iconfont JavaScript】是一种将图标字体引入Web项目的方式，它允许开发者方便地使用矢量图标，支持动态改变颜色和大小，且文件体积小，加载速度快。在Totoro-Vue中，可能通过这种方式引入各种商城相关的图标。 ...

【亲测免费】 Vant Icons: 极简主义图标的完美伙伴

gitblog_00015的博客

08-06

1095

Vant Icons: 极简主义图标的完美伙伴在这个视觉体验至上的时代，图标不仅是应用或网站的装饰元素，它们更是与用户沟通的语言和桥梁。Vant Icons，作为一款由有赞（Youzan）团队精心打造的高质量图标库，正是设计师和开发者在追求极致用户体验道路上不可或缺的工具。项目介绍 Vant Icons是Vant UI组件库的补充部分，专注于提供一套风格统一、数量丰富且易于集成的SVG图标集。...

在Vant的基础上实现添加表单验证框架的方法示例

12-01

Vant 一套基于Vue的移动端UI框架，有赞出品。因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。分析需求我们找的插件主要能解决以下问题支持中文适应UI框架分组验证动态验证（数据动态，规则动态）去网络上搜索了一些框架，推荐两款（在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.

Vue移动端 Vant的组件使用自定义图标

错的不是你

06-04

9184

Vant自带的图标比较少，有时候不能满足使用。普通使用第三方图标我一般使用阿里图标找到自己想要的图片然后加入购物车 1.点击下载代码 2.下载完成后放在项目中，如放在src/assets下，像demo.html、demo.css等示范文件可选择性删除。 3.在main.js中添加上述样式的引入代码： import "@/assets/font/iconfont.css"; 4.最后使用即可，如（重点是有class=“iconfont” class-prefix="icon"这部分）： <

vant 引入iconfont的正确姿势

03-13

5750

先引入官网的自定义图标介绍需要注意两个要点 1.引入字体（字体名称和前缀名称一致） 2.icon前缀是横杠连接那么举例说明，如果想要如此这般使用： <van-icon class-prefix="iconfont" name="weibo" size="2rem" /> 1.前缀为iconfont 2.前缀使用横杠具体如何操作，下面贴图： 1. 找到我的项...

Vue3封装vant的表单和选择器

m0_53164768的博客

01-05

1004

其中使用了vue3.3的新特性对defineProps进行解构。

在ui组件中引入iconfont

qq_38998319的博客

11-26

667

https://shimo.im/docs/XcdrxKQCGKTVGcgP/ 《在ui组件中引入iconfont》，可复制链接后用石墨文档 App 或小程序打开如何在vant 组件中使用自定义icon 1.创建项目 2.将图标加入购物车 3.点击购物车将购物车图标添加到项目中 4.选择font class,生成代码 5.点击链接获取代码 6.在public文件中建css文件,建icon.css,将获取的代码复制到文件中 7.App中引.

Vant使用 van-icon自定义图标以及其他组件设置icon属性

传播是知识存在的意义

09-15

9017

使用微信开发者工具，开发微信小程序的时候需要使用到大量的图标，使用阿里巴巴矢量图标库（https://www.iconfont.cn/）里面的图标。开发环境：macOS + 微信开发者工具,van-icon使用自定义图标，以及其他组件配置 icon属性

Vant使用自定义图标(阿里图标)

大圣归来圣骑士清欢的博客

04-08

2728

Vant使用自定义图标

如何自定义vant组件的图标

m0_59411260的博客

11-21

1054

解决办法：template + #组件属性名。示例：（class为自己设定）

vant4 vue3+ts van-picker组件怎么使用v-model

11-19

在Vant 4结合Vue 3和TypeScript中使用van-picker组件时，你可以通过设置`v-model`属性来双向绑定数据。首先，你需要安装vant库，如果是使用npm，可以运行： ```bash npm install vant vant-ts ``` 然后，在TS配置...