vant使用iconfont图标

我不是女神ヾ 2023-10-06 17:52 55阅读 0赞

#### 1、登录官网 ####

登录https://www.iconfont.cn/，这是一个很好用的图标库。

#### 2、选择自己需要的图标，添加到购物车 ####

#### 3、进入购物车，添加图标至项目 ####

![20191226160130586.png][]

#### 4、修改class名称和前缀 ####

![20210531110040809.png][]![20210531110118458.png][]

![20210531102632317.png][]![2021053110292973.png][]

#### 5、下载代码 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2NDQ1NzQ_size_16_color_FFFFFF_t_70][]

#### 6、存放到assets/iconfont中 ####

下载下来是个压缩包，解压。主要是这些文件。为了方便管理，比如存放到assets/iconfont中，其中demo的那两个文件可以不放进去。打开demo\_index，可以查看信息。

#### 7、引用 ####

在main.js中引入

import ‘@/assets/iconfont/iconfont.css’

#### 8、使用 ####

<span class="iconfont van-icon-xxx"></span> 比如<span class="iconfont van-icon-excel"></span>

**注意 ：**

**在第4步配置 Font Family为 iconfont 这里不能省略。**

**在第4步配置前缀 为 van-icon-**

或者

<van-icon class="iconfont" class-prefix='van-icon' name='excel' color="green"></van-icon>

[20191226160130586.png]: https://img-blog.csdnimg.cn/20191226160130586.png
[20210531110040809.png]: https://img-blog.csdnimg.cn/20210531110040809.png
[20210531110118458.png]: https://img-blog.csdnimg.cn/20210531110118458.png
[20210531102632317.png]: https://img-blog.csdnimg.cn/20210531102632317.png
[2021053110292973.png]: https://img-blog.csdnimg.cn/2021053110292973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2NDQ1NzQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210531110311568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2NDQ1NzQ=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 iconfont 字体图标

<i class="iconfont icon-home"></i> 使用时只需要添加class=“iconfont icon-xxx”，xxx可以去阿里巴巴矢量...

迈不过友情╰/ 2024年04月19日 14:58/ 0 赞/ 96 阅读

相关 vant使用iconfont图标

1、登录官网登录https://www.iconfont.cn/，这是一个很好用的图标库。 2、选择自己需要的图标，添加到购物车 3、进入购物车，添加图标至项

我不是女神ヾ/ 2023年10月06日 17:52/ 0 赞/ 56 阅读

相关 iconfont图标扩展

以阿里巴巴的矢量图标库iconfont为例：[https://www.iconfont.cn/][https_www.iconfont.cn] JeecgBoot开发文档—

分手后的思念是犯贱/ 2023年07月13日 12:12/ 0 赞/ 17 阅读

相关 uni-app 使用iconfont图标字体

介绍2种方式：一、使用class类名添加图标二、使用字体代码添加图标一、class类名：在confont中，选择想要的图标，加入购物车，添加至

- 日理万妓/ 2023年06月25日 14:27/ 0 赞/ 24 阅读

相关 iconfont图标下载

网址：[https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92&page=2][https_www.iconfont

拼搏现实的明天。/ 2023年03月13日 06:22/ 0 赞/ 12 阅读

相关在 Hexo 中使用 iconfont 图标

> [iconfont首页][iconfont] iconfont 获取可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果

系统管理员/ 2023年01月08日 02:15/ 0 赞/ 323 阅读

相关 vue中如何使用iconfont图标

vue中引入iconfont图标引入在线链接文件如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件前面的步骤就不赘

本是古典何须时尚/ 2022年11月05日 08:31/ 0 赞/ 246 阅读

相关 Iconfont图标的使用

1. 创建我的项目官网地址 : http://iconfont.cn/ 使用github账号登录图标管理 => 我的项目 ![2018121414194091

刺骨的言语ヽ痛彻心扉/ 2021年09月17日 08:58/ 0 赞/ 520 阅读

相关 iconfont字体使用彩色图标

1.先将选择好的图标加入购物车 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

╰+攻爆jí腚メ/ 2021年08月13日 13:43/ 0 赞/ 674 阅读

相关 uniapp使用iconfont字体图标

情景1：使用灰色的字体图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

た入场券/ 2021年07月24日 13:40/ 1 赞/ 737 阅读