vant中van-icon使用自定义图标简单粗暴

最新推荐文章于 2024-05-06 17:03:21 发布
最新推荐文章于 2024-05-06 17:03:21 发布
阅读量5.2w 收藏 13
点赞数 5
分类专栏： javascript 文章标签： vant icon vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42565137/article/details/95975966
版权

图标库是iconfont，这里面的图标够用了吧

一.新建项目

image.png

二.选择喜欢的图标，加入购物车，再添加到项目

三.生成代码

image.png

四.将链接粘贴到地址栏，将css内容复制到icon.css

image.png

五.在App.vue进行全局引用

image.png

六.在相应组件使用van-icon，iconfont类是必须要有的，不同的图标就是不同的percy-icon-xxxx

image.png

优雅的王德奥
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vant使用遇到icon图标不显示，显示为方块□□□□□
qq_41047017的博客
04-19 5001
vant使用遇到icon图标不显示，显示为方块□□□□□现象搜索找到的方法最终找到原因：最终现象 现象 <van-icon name="chat-o" /> <van-rate v-model="value" /> 搜索找到的方法 尝试之后但是结果并还是不行 最终找到原因： * { margin: 0; padding: 0; box-sizing: border-box; /* vant icon图标会报错 */ /* font-fam
玩转Vant的第二天（最详细、保姆级Button篇）
最新发布
墨杨清竹的博客
05-08 863
玩转Vant的第二天（最详细、保姆级Button篇）
Vant使用自定义图标(阿里图标)
大圣归来圣骑士清欢的博客
04-08 1306
Vant使用自定义图标
Vant使用 van-icon自定义图标以及其他组件设置icon属性
传播是知识存在的意义
09-15 4565
使用微信开发者工具，开发微信小程序的时候需要使用到大量的图标，使用阿里巴巴矢量图标库（https://www.iconfont.cn/）里面的图标。开发环境：macOS + 微信开发者工具,van-icon使用自定义图标，以及其他组件配置 icon属性
vant中van-icon使用自定义图标
Greenhand_BN的博客
07-20 7394
第一步：组件中引入 iconfont 的样式 我这里直接在main.js中引入的 import Vue from 'vue' import App from './App' import router from './router' import Vant from 'vant'; import 'vant/lib/index.css'; import "./assets/icon/iconfont.css" Vue.config.productionTip = false Vue.use(Vant);
van-icon自定义图标的引入
liangzg
04-22 2354
van-icon自定义图标的引入1.打开iconfont官网2.将需要引入的图标添加入库3.将已经入库的图标添加至项目（如果还没有项目需要创建）4.复制代码在浏览器打开5.将内容全部复制6.在本地应用中新建css文件，并把内容拷入，把css文件引入到mian.j中7. 页面van-icon中使用 1.打开iconfont官网 https://www.iconfont.cn/ 2.将需要引入的图标添加入库 3.将已经入库的图标添加至项目（如果还没有项目需要创建） 4.复制代码在浏览器打开 5.将内容全部
【Vant Weapp】van-icon 图标
joanmelon的博客
08-07 1193
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
【vant】爬坑引用本地图片
易小花的博客
08-06 3094
[vant]爬坑image 最近因为项目需求要利用vant引用本地图片，但是我发现，我死活引用不上本地图片，老是找不到图片，试了n多方法，我真的是欲哭无泪啊。然后我又查了很多文档，发现还是木有用。简直了，一遇到调用图片的，我真的是瑟瑟发抖，害怕。 话不多说了，进入正题。 一开始我是这么写的，对于路径问题，嗯，遵循不报找不到的错就好，至于原理，我还真没深究过。 <div class="boximg"> <img src="../assets/hahaha.png"> </div
vant 自定义 van-dropdown-item的用法
10-15
为了实现这个自定义的 `van-dropdown-item`，开发者将所有这些元素包裹在一个弹性盒容器（`.choice`）中，使用 `flex-direction: column` 指定垂直布局。这样，顶部、中间和底部的内容就会按照预期的位置排列，中间...
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <van class=vanCellGroupClass><!--../../assets/tou.png--> <!--<van xss=removed title=二级经营单位 value=未完成 size=large label=二...
vue3怎么调用vant中的icon组件
zzx262625的博客
05-06 482
这通常需要在项目中配置额外的 CSS 或 SVG 资源，并在使用 Icon 组件时指定正确的图标名字。在 Vue 3 中调用 Vant（一个基于 Vue 的移动端 UI 组件库）的 Icon 组件，你需要首先确保已经正确地安装了 Vant。如果你只打算使用 Vant 中的一部分组件，而不是全部，那么你可以使用按需引入的方式来减少项目的体积。在你的 Vue 组件或页面中使用 Icon 组件，就像上面示例中展示的那样。你可以在项目的 Babel 配置文件中添加这个插件的配置。属性来指定要显示的图标的名字。
vant 自带ico样式与名称
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
09-22 2977
用vant改写其他web app时，导航栏的ico名称不知道叫什么。
Vue移动端 Vant的组件使用自定义图标
错的不是你
06-04 8868
Vant自带的图标比较少，有时候不能满足使用。 普通使用第三方图标 我一般使用阿里图标 找到自己想要的图片 然后加入购物车 1.点击 下载代码 2.下载完成后放在项目中，如放在src/assets下，像demo.html、demo.css等示范文件可选择性删除。 3.在main.js中添加上述样式的引入代码： import "@/assets/font/iconfont.css"; 4.最后使用即可，如（重点是有class=“iconfont” class-prefix="icon"这部分）： <
【Vant4】Vant4使用自定义图标(阿里图标)
此人太懒，没有任何简介
12-22 3577
Vant4使用自定义图标(阿里图标)
vant icon 修改
weixin_39428080的博客
09-09 673
vant icon 修改。
阿里iconfont自定义在zan ui icon组件里
土鸡汤来一碗
10-06 2171
1.在阿里iconfont下载 ttf文件和iconfont.css并引入到项目文件夹；  记住只需要两个文件就可以了 2.如果要重新添加字体图标那么需要重新下载iconfont并重新替换掉 ftt文件和 在iconfont.css 文件添加想对应的icon代码就可以了 3.使用方式 &lt;van-icon name="shebei" /&gt; 自定义 .icon-shebei:b...
H5网页的Vant的Icon图标显示不出来
坐等夕阳落time的博客
12-14 6536
因为vue环境没弄好
vant2 van-checkbox 自定义图标
07-25
在 Vant 2 版本的 `van-checkbox` 组件中，你可以通过自定义图标来实现个性化的效果。以下是一个示例： ```vue <template> <van-checkbox v-model="checked" shape="square" :icon="customIcon"></van-checkbox> </template> <script> export default { data() { return { checked: false, customIcon: { checked: '自定义选中图标', unchecked: '自定义未选中图标' } }; } }; </script> ``` 在上面的示例中，我们通过 `:icon` 属性来设置自定义的图标。`customIcon` 对象包含了两个属性：`checked` 和 `unchecked`，分别代表选中状态和未选中状态下的自定义图标。 你可以替换 `'自定义选中图标'` 和 `'自定义未选中图标'` 为你实际使用的图标，可以是图片路径、Iconfont 类名或其他自定义样式。根据你使用的图标库或方式，可以灵活地配置自定义图标的样式和显示方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值