若以vue引入阿里巴巴iconfont图标

已于 2024-06-06 20:24:33 修改
阅读量407 收藏 2
点赞数 6
文章标签： vue.js 前端 javascript
于 2024-06-03 21:58:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someTuzkis/article/details/139425313
版权

若以vue引入阿里巴巴iconfont图标

教程来自B站大佬分享： 原视频地址

第一步

打开阿里巴巴iconfont的网站，注册 、登录
https://www.iconfont.cn/

第二步

找到 我的项目 然后新建一个项目
在这里插入图片描述

第三步

找自己需要的图标添加入库，然后再加入到项目中
在这里插入图片描述
在这里插入图片描述

第四步

在我的项目中，选择font class, 生成链接，然后点击链接
在这里插入图片描述
复制打开窗口中的内容，在资源目录下创建一个.css文件，把内容粘贴进去
在这里插入图片描述
在这里插入图片描述
然后 在main.js文件中引用这个.css文件
在这里插入图片描述

第五步

使用引用的icon图标
前面是创建项目时的Font Family，后面是前缀+图标名
在这里插入图片描述
在这里插入图片描述

someTuzkis
关注
Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 421
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1484
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 643
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
【Vue】前端项目引入阿里图标
m0_61049675的博客
01-30 721
注意：iconfont是固定的，icon-sousuokuang为图片红框部分。
vue3项目导入阿里图标库iconfont
最新发布
l1965564484的博客
08-15 619
我们需要的就是demo下的这些个文件。
VUE引入阿里icon
weixin_42419575的博客
12-29 521
效果展示： 引入眼睛的图标 步骤： 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
Vue项目引入icon图标(阿里巴巴矢量图标库)
weixin_59528719的博客
02-28 1409
当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。
在vue项目中引入阿里图标库小记
weixin_30254435的博客
08-10 221
使用Vue技术栈开发不仅效率高，而且很友好，而且还有很多基于vue的UI框架，例如：element等，但是这类框架美中不足的是，图标太少。为了解决这个问题，不得不引入第三方字体库，今天以阿里图标库为例，如何在vue中使用。 1、首先找到合适图标，然后点击添加入库，接着点击右上角的购物车图标。 2、你刚才选择的图标就能在侧边栏看到了，选择要加入的项目（提前建好的项目），点击确定。 ...
​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）
bing103425的博客
07-25 2479
1.打开iconfont，并登录账号 http://www.iconfont.cn/     2.挑选自己喜欢的图标，加入购物车       3.打开购物车 =&gt; 添加至项目 =&gt; 新建项目目录 =&gt; 确定         4.进入我的项目，点击Symbol，点击生成代码       5.将生成的代码引入index.html ...
Vue3项目动态引入iconfont（阿里巴巴矢量图标库）
青年码农
12-18 1754
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具这篇文章主要讲的是在Vue3项目上，动态引用iconfont库。iconfont怎么新建项目，这里就不多说了，我们要用到的就是下方圈出来的。1.定义方法我们定义一个方法，动态通过link引入我们的iconfont文件，...
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 5617
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
Vue使用阿里图标库
12-16
Vue使用阿里图标库,详细步骤 一键解决轻轻松松适用所有UI框架 vue使用
vue中使用阿里图标
qq_62917185的博客
07-27 943
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引入阿里巴巴icon
weixin_43871703的博客
01-06 502
从阿里巴巴icon里面下载的包文件吧所有的图标打包下载 把框里面的文件copy进入assets文件； 在main.js 引入iconfont.css 即可
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 1873
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
Vue项目中引入阿里icon图标
长不大的大灰狼
01-12 2001
Vue项目中引入阿里icon图标一、创建Svglcon组件二、创建icons文件夹三、main.js中引入四、配置五、使用 iconfont——国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。 链接：iconfont官方地址 一、创建Svglcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName">&lt
Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty
zhuceyigecsdn的博客
04-18 736
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue引入阿里图标库
aiteshanshan的博客
11-16 806
1.下载阿里图标 2. 3.在main.js里引入 import '@/assets/icons/iconfont.css' 4.在vue页面使用 <i class="iconfont icon-Abnormalarea"></i>
vue使用阿里图标
m0_54570434的博客
11-30 1733
这样的引入是引入对应的 字体类 对其之前的颜色会去除（类似于黑白）需要自定义颜色，对于简单的图标去改变颜色用这种方式是非常友善的，不用担心fill占据。【1】（1）是示例 可去除 （2）是需要引入的 ，新建icon文件夹放入后 在main.js对应引入她的js和css。【2】复制图标代码(例：icon-icon_select) 再对应使用。【1】复制链接代码，在index.html引入。【1】复制链接代码，在index.html引入。【2】之后和 方法1 的【2】及后面步骤一样。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值