我是如何在开源系统中（Vue）中引入阿里巴巴Icon图标的？

已于 2022-04-25 09:46:27 修改
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 从0到1开发前后端分离系统 文章标签： java vue 开源
于 2022-04-25 09:25:32 首次发布
本内容最终版权归csdn博主掉头发的王富贵所有，本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/csdnerM/article/details/123819302
本文详细介绍了如何在Vue项目中引入阿里巴巴的图标库。从访问官网选择图标，到下载代码并导入项目，再到配置main.js和具体使用图标，每个步骤都清晰阐述，帮助开发者实现更美观的界面效果。

开始的背景是这样的，我们的系统是vue+elementui写的，直到在写一个博客的点赞的时候发现elementui并不能满足我们的需求，这是他自带的图标：

在这里插入图片描述
于是我们就做成了以下的样子：
在这里插入图片描述
在这里插入图片描述
这是使用了阿里的icon库之后的图标：
在这里插入图片描述
是不是好看很多，好了接下来教大家怎么在vue项目中引用

第一步，进去官网

在这里插入图片描述

第二步，选择

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 2299
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
weixin_60387745的博客
03-07 5297
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
vue引入阿里巴巴icon
weixin_43871703的博客
01-06 569
从阿里巴巴icon里面下载的包文件吧所有的图标打包下载 把框里面的文件copy进入assets文件； 在main.js 引入iconfont.css 即可
Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty
zhuceyigecsdn的博客
04-18 967
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue中使用阿里图标
qq_62917185的博客
07-27 1016
4.在css文件夹中再创建一个文件夹（我在这里命名为iconfont），因此将iconfont.ttf,iconfont.woff,iconfont.woff2三个文件复制粘贴到iconfont文件夹中；3.在vue项目中的assets文件夹中创建一个css文件夹，将iconfont.css文件复制粘贴到css文件夹。5.修改iconfont.css文件里面的其他三个文件的路径；6.在main.js文件中引入iconfont.css文件；8也可以在iconfont.css文件中修改样式；...
用阿里小图标增强Vue项目Element-UI的图标库
- 在Element UI中，图标是通过特定的标签和属性来引入的，例如使用`<el-icon>`标签和`:name`属性来显示一个图标。 - 要替换Element UI原有的图标，需要替换掉对应的`:name`属性值为阿里小图标库中的相应图标名称或...
elmentui使用阿里巴巴图标库
12-26
Element UI 是基于 Vue.js 的一套开源 UI 组件库，它并未直接内置阿里巴巴的图标库。不过，Element UI 提供了自有的图标组件 `el-icon`，这部分图标集是通过 SVG 格式预设好的，包含了常用的一些基础图标。 如果你...
vue3 svg图标在哪里下载
最新发布
06-01
用户之前的问题是关于在Vue3中使用SVG图标的具体步骤，现在转向寻找资源。我需要结合之前的回答和提供的引用内容，给出合适的推荐。首先，回顾之前的回答，用户已经配置了vite-plugin-svg-icons，并创建了SvgIcon...
【图标动画创意】：阿里矢量图标库在WPF动画中的应用
[【图标动画创意】：阿里矢量图标库在WPF动画中的应用](https://vectorified.com/images/alibaba-icon-18.png) # 摘要 本文全面探讨了WPF动画技术及其在图标设计中的应用。首先介绍了WPF动画的基础知识，随后概述了...
VUE引入阿里icon
weixin_42419575的博客
12-29 579
效果展示： 引入眼睛的图标 步骤： 1：https://www.iconfont.cn/ 2：搜索 3：放在要选择的图标上“添加入库” 4：点击自己的购物车 5：下载代码6，向项目的src文件夹下的assets添加iconfont文件夹，将刚刚9个文件复制到里面 7、main.js中 import './assets/iconfont/iconfont.css'; 8、对应的.vue文件中 <i class="iconfont icon-yanjing"></i> 9、注意 i
阿里图标demo
04-19
阿里图标引用demo，在网页中引用阿里iconfont字体图标的三种方式。
阿里矢量图标
10-31
阿里图标，自己制作的几个关于医学方面的图标，用法和阿里矢量图标一样
vue项目中使用阿里icon库
gcy_rose的博客
02-02 748
从阿里字体图标库新建一个项目（当然也可选择其他icon库） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190202225650587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2djeV9y...
vue项目中使用阿里iconfont图标
鸡血博客
09-11 1906
方法一：简单粗暴 - 生成链接使用法 1.打开iconFont官网选择自己喜欢的图标，并且添加购物车 2.点击购物车，添加至项目 5.为了方便可以给项目起一个名字 6. 选择Font class 7.点击“暂无代码，点此生成” 7. 点击复制连接 8.接下来复制链接地址，在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址.... <link rel="stylesheet" href...
阿里icon小图标在vue中的教学使用（两种主流方案）
您的博客
02-16 9712
1.小图标的前世今生。 曾几何时，H5开发还是以雪碧图作为小图标的一种处理方案；然而，随着时间迁移，在当今前端开发环境中，icon小图标的使用率越来越高，需求越来越精致。虽然Element、Iview、Vant等组件库也相应提供了一些自带的icon图标，可是在追优的PM眼中，高大上的icon小图标才是其所想要的。本着专业人做专业事的心境，挑选和使用最优，最好的小图标就成了前端开发们的一种准则。 2.阿里巴巴 -- iconfont。 在众多icon小图标的资源站中，阿里巴巴的iconfont无疑是其中
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 6339
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
VUE项目中使用阿里图标iconfont
songshuguowang的专栏
01-29 723
1、登录阿里巴巴图标库网，选iconfont图标，添加入库   2、点击购物车图标，添加到项目，选择项目，点击确定   3、此时会跳转至我的项目页面，显示了这个项目中所有选中的图标，点击红色文字，生成代码，再点击复制代码，将生成的代码拷贝至项目中的css文件中 4、查看使用帮助，这里第一步的代码替换上面我的第三步中拷贝的代码，第二步第三步照做即可     ...
阿里巴巴icon在vue项目中使用方法
xiaoming4965的博客
01-17 542
阿里巴巴icon在vue项目中使用方法
Vue项目引入icon图标(阿里巴巴矢量图标库)
weixin_59528719的博客
02-28 1928
当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

掉头发的王富贵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值