vue 项目中使用阿里巴巴矢量图标库iconfont

ゞ浴缸里的玫瑰 2021-10-29 08:26 620阅读 0赞

原文：[https://www.jianshu.com/p/38262f18eee2][https_www.jianshu.com_p_38262f18eee2]

#### 1.打开iconfont阿里巴巴官网[https://www.iconfont.cn][https_www.iconfont.cn] ####

#### 2.新建项目(这样方便后期维护图标库) ####

![Image 1][]

image.png

#### 3.把需要的图标添加到购物车 ####

![Image 1][]

image.png

#### 4.打开购物车并选择添加至项目，然后确定 ####

![Image 1][]

image.png

#### 5.这时候可以在项目中看到你选中的svg图标，这时候可以点击下载至本地 ####

![Image 1][]

image.png

#### 6.打开下载的zip包就可以看到里面的文件，将下面几个文件取出 ####

![Image 1][]

image.png

#### 7.在vue的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下 ####

#### 8.在main.js中引入import './assets/icon/iconfont.css'，这样子就可以在vue项目中使用你下载的svg图标 ####

#### 9.在vue中可以写<span class="icon iconfont icon-right"></span>就可以正常显示iconfont图标，修改的时候只需要修改icon-right这个class就可以了，这个class名称可以在font class中看到 ####

![Image 1][]

如果后期想再添加图片在iconfont.css拷贝过来添加到项目上

![1553506-20190712090922285-939716780.png][]

每次新增图标后都要覆盖一次资源文件

转载于:https://www.cnblogs.com/ssjf/p/11173988.html

[https_www.jianshu.com_p_38262f18eee2]: https://www.jianshu.com/p/38262f18eee2
[https_www.iconfont.cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.iconfont.cn
[Image 1]: 
[1553506-20190712090922285-939716780.png]: /images/20211029/b0d9bac2f0d44bb4b3507db64da35f4b.png

发表评论取消回复

表情：

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

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

相关阅读

相关阿里巴巴矢量图标库iconfont的使用

场景工作中如果用到常用的一些图片去哪寻找。阿里巴巴矢量图标库： [https://www.iconfont.cn/home/index][https_www.ic

ゝ一世哀愁。/ 2023年10月08日 11:41/ 0 赞/ 61 阅读

相关 uni-app 引入 iconfont - 阿里巴巴矢量图标库

1. 登录iconfont - 阿里巴巴矢量图标库，在资源管理 - 我的项目里复制代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

朱雀/ 2023年01月06日 01:13/ 0 赞/ 307 阅读

相关 Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库

最近在使用`vue-element-admin`开源项目进行系统开发，但是在引入第三方图标库的时候，出现了一些问题，百度找了找，也没有找到自己想要的答案，最后经过多次尝试，将问

谁借莪１个温暖的怀抱￠/ 2022年05月18日 04:49/ 0 赞/ 817 阅读

相关阿里巴巴矢量库的使用

1.登录[http://www.iconfont.cn][http_www.iconfont.cn] 可以用github帐号登录 2.点击导航栏上的图标库 3.选择自己需要

电玩女神/ 2022年05月08日 13:03/ 0 赞/ 392 阅读

相关阿里巴巴矢量图标使用步骤PC

1.打开阿里网址 [https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a][https_www.ic

以你之姓@/ 2022年02月28日 15:38/ 0 赞/ 401 阅读

相关【Canvas】字体图标二、 Iconfont-阿里巴巴、矢量图标库

![在这里插入图片描述][70] 在Canvas中使用字体图标主要整理了两大类方法，第二种：使用 Iconfont-阿里巴巴、矢量图标库里的 Unicode编码

小鱼儿/ 2022年02月23日 00:04/ 0 赞/ 668 阅读

相关阿里巴巴矢量图标库 iconfont图标的使用

step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过; step

谁借莪１个温暖的怀抱￠/ 2022年02月02日 11:13/ 0 赞/ 508 阅读

相关 Iconfont-阿里巴巴矢量图标库

1、可以对单个图标下载，下载PNG图片应用到项目中去。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

本是古典何须时尚/ 2021年11月16日 19:52/ 0 赞/ 590 阅读

相关阿里巴巴矢量图标库字体图标的下载与使用

1、进入阿里巴巴矢量图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] 2、把需要的图标加入购物车 3、点击旁

偏执的太偏执、/ 2021年11月04日 14:04/ 0 赞/ 777 阅读

相关 vue 项目中使用阿里巴巴矢量图标库iconfont

原文：[https://www.jianshu.com/p/38262f18eee2][https_www.jianshu.com_p_38262f18eee2] 1.打开

ゞ浴缸里的玫瑰/ 2021年10月29日 08:26/ 0 赞/ 621 阅读