本文主要是介绍【Vant4】Vant4使用自定义图标(阿里图标)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vant4使用自定义图标(阿里图标)
前言
阿里图标官网
备用地址： https://www.iconfont.cn/
添加图标
- 进入官网添加图标，如箭头所示
- 点击右上方小车
- 添加至项目
- 进入我的项目，点击项目设置
-
设置图标前缀，设为什么都行，我这里的是
icon-与iconfont
-
点击下载到本地
-
复制如图选中的文件，粘贴项目中的
src/assets/icon_font/目录下
- 在main.js引入图标css
// 引入自定义图标
import '@/assets/icon_font/iconfont.css';
- 使用
<!-- 单色图标 -->
<van-icon class="iconfont" class-prefix='icon' name='grouping' />
<van-icon class="iconfont" class-prefix='icon' name='aite' /><!-- 多色图标 -->
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-aite"></use>
</svg>
- class 阿里设置的Font Family名称，注意class，图标没效果时务必加上
- class-prefix 图标前缀
- name 图标名称
如icon-grouping
- icon 就是前缀
- grouping 才是图标名称
最终效果
end
2022/12/28 一改
2023/3/17 二改
这篇关于【Vant4】Vant4使用自定义图标(阿里图标)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
