如何在vue的项目中导入阿里巴巴图标库

最新推荐文章于 2024-10-17 10:46:42 发布
最新推荐文章于 2024-10-17 10:46:42 发布
阅读量904 收藏 6
点赞数 15
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74010119/article/details/140346912
版权

阿里巴巴矢量图标库官网：iconfont-阿里巴巴矢量图标库

选择你喜欢的图标，添加入库

点击添加至项目，并新建文件夹，点击确定

      

选择font-class，点击生成代码

代码生成后，在网站上打开

全选复制到style

点击复制代码，替换icon-xxx<i class="iconfont icon-xxx"></i>

最后变成<i class="iconfont icon-xihuan"></i>，就可以使用了

注：调节大小和修改颜色

调节大小（修改font-size的大小即可）

修改颜色（有色图标有时会没有颜色）

捕捉一只前端小白
关注
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
vue项目引入阿里云图标的4种方式
sunms
05-06 5750
阿里巴巴iconfont官网地址 Iconfont 挑选图标 登陆后通过点击图标购物车按钮，将需要的图标加至购物车 点击购物车按钮，添加至项目。 如图添加了对应的icon图标到项目中。 将图标素材下载至本地。 将图标引入vue项目 方法1：Font class的方式 1、将下载后的图标文件引入到vue项目中。 2、全局引入项目下面生成的 fontclass 代码： //iconfont import '@/assets/fonts/iconfont.css' 3、挑选相应图标并获取类名，应用
vue 项目中使用阿里巴巴矢量图标库
qq_43894292的博客
07-26 1682
iconfont
vue项目引入阿里图标后如何新增图标至项目中
最新发布
xiao_qiang666的博客
10-17 165
3、复制代码，替换至项目中的iconfont.css。1、在阿里官网找到合适的图标添加至项目。4、在如下三个文件中添加新增的图标。2、将文件下载至本地。
vue导入图标的3种方式【阿里图标】
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
vue iconfont阿里图标库的三种使用方法
GKISX1216的博客
05-20 5264
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 5684
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
vue项目中使用iconfont阿里图标库
cjxIt的博客
08-17 949
5.在vue项目中 css新建一个文件夹 把 图4解压后的复制到css目录下 如下图。6.在vue入口mian.js中引入 图4的 iconfont.css 如下图。2.根据搜索选择自己想要的图片 添加到项目中或者新建项目 如下图。7.iconfont.css 里面的内容如下图。3.添加之后如下图 点击下载至本地。4.下载本地解压后的文件如下图。8.在vue各个组件中使用方法。1.进入icon 官网。
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
Vue项目中如何引入icon图标
08-27
5. 在App.vue中引入icon.styl文件：需要在App.vue中引入icon.styl文件，不然是不生效的。 6. 在template上写对应的class名：需要在template上写对应的class名，加上样式即可。 总结 本文详细介绍了在Vue项目中如何...
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4575
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 1911
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
vue使用阿里图标
m0_54570434的博客
11-30 1741
这样的引入是引入对应的 字体类 对其之前的颜色会去除（类似于黑白）需要自定义颜色，对于简单的图标去改变颜色用这种方式是非常友善的，不用担心fill占据。【1】（1）是示例 可去除 （2）是需要引入的 ，新建icon文件夹放入后 在main.js对应引入她的js和css。【2】复制图标代码(例：icon-icon_select) 再对应使用。【1】复制链接代码，在index.html引入。【1】复制链接代码，在index.html引入。【2】之后和 方法1 的【2】及后面步骤一样。
Vue - 项目中使用iconfont（阿里图标库）
热门推荐
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
vue中使用iconfont阿里图标库（symbol本地环境）
qq_37291367的博客
05-27 903
vue中引入阿里图标库，symbol方式，个人便捷备份。
Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty
zhuceyigecsdn的博客
04-18 751
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue 中引入阿里图标库，封装iconPicker组件
weixin_44875693的博客
08-04 1026
vue 中引入阿里图标库，封装iconPicker组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值