vant中使用iconfont的图标

本文介绍如何在IconFont项目中自定义图标前缀,通过修改项目设置及CSS文件实现图标类名变更,确保图标正常显示。

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

  1. 在iconfont的自己的项目中 更多操作–》编辑项目
    在这里插入图片描述

  2. 编辑FontClass/Symbol 前缀
    默认为icon,我们将其修改为icon-

  3. 然后下载之后将引入的文件重新替换
    在这里插入图片描述

  4. 修改iconfont.css文件
    将原来的 font-family: "iconfont" 改为 font-family: "icon"
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  5. 参考官网
    我们来写自己的图标

<van-icon class="iconfont" class-prefix="icon" name="xiayibu" />

在这里插入图片描述
注意这里的name是icon-之后的内容
在这里插入图片描述
成功!!
之前试过直接修改iconfont.css文件没有用,就修改了项目的前缀。
不是很明白这个值什么机制,猜测前缀是以‘-’作为标识进行分割的,只修改iconfont.css中的font-family没有用。
以上是自己的见解,有什么问题大家可以在评论区指出哦

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值