Vue项目中引用‘阿里巴巴字体图标库iconfont’

最新推荐文章于 2025-04-07 15:52:39 发布
最新推荐文章于 2025-04-07 15:52:39 发布
阅读量821 收藏 11
点赞数 5
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84418948/article/details/138320938
版权
文章介绍了在UI设计中遇到的图标问题，推荐使用阿里巴巴的Iconfont库获取SVG格式图标，便于项目管理和统一。同时，讲解了如何在Vue项目中应用这些图标，以及Vue框架的相关概念和技术细节。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标

在这里插入图片描述

在这里插入图片描述

上面的两个ui框架中都提供了很多图标我们至于要直接运用即可，但是在我们的开发需求中很多图标是不包含在这其中的，很难找到一样甚至相近的都很少，当然不包括那些按照ui库进行设计的ui设计师，下面为大家介绍一款强大的图标库 阿里巴巴字体图标库iconfont

在这里插入图片描述

点击进入官网

2.登录或者注册

点击右上角角的头像

在这里插入图片描述

随

最低0.47元/天 解锁文章
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 2155
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1610
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
vue中使用阿里字体图标库
qq_45208029的博客
09-05 433
本文基于pink老师和哈默老师的总结 下文的div换成span（或者其他行内标签如i）标签，我就不改了 1.首先进入阿里图标库，并且搜索对应的字体图标加入到购物车，之后添加到项目里（项目需要提前创建或者添加时创建） 2.删除demo文件并且将文件引入到main.js中 3.使用字体图标库的两种方式 3.1引入类名（推荐） 3.2使用content 如果你直接从css文件复制content会缺少几个符号 4.优化代码（只使用第一种引入） 第二个是为了防止出.
vue 本地项目引入阿里图标
最新发布
qq_34273698的博客
04-07 427
i> 标签是语义化的，用于表示图标的意义，而不仅仅是装饰性的。引入我们下载的图标时注意引用的时候前面要加上 iconfont，然后后面指定使用图标的类名，也就是icon-jiang.3 icon-aixin 是从iconfont.css文件中拿到的,这个文件中有这个类,页面上才会显示图标,如果文件中没有这个类,页面中的图标就不会显示.aaa是自己定义的类名,可以设置宽高,这样页面上就可以展示你的图标了.复制内容后,放在一个css文件中,把css文件放在项目中。在入口文件main.js 中引入。
Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty
zhuceyigecsdn的博客
04-18 922
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue项目里面使用阿里图标库
qq_43505774的博客
01-22 257
阿里图标库 登录账号 把喜欢的图标下载 选择font class 创建项目 放入 然后 下载至本地 有一个压缩包 都解压到任意目录 然后main.js导入 import './assets/icon/iconfont.css' import './assets/icon/iconfont.js' 如果你想使用里面的字体 一定使用这个样式 全局覆盖 @font-face { font-family: "iconfont" !important; src: url("./assets/icon/i.
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
解锁UniApp新姿势：巧用阿里巴巴字体图标库
Jiaberrr的博客
02-13 1052
在UniApp开发中，图标是构建用户界面不可或缺的元素。一个简洁美观的图标，能够让应用的界面更加生动直观，提升用户体验。然而，在众多的图标资源中，如何选择合适的图标库并正确使用，成为了开发者需要面对的问题。阿里巴巴字体图标库，作为国内知名的图标资源平台，拥有丰富多样的图标资源，涵盖了各种场景和行业，为开发者提供了极大的便利。本文将详细介绍在 UniApp 中使用阿里巴巴字体图标库的方法和具体步骤，帮助大家快速掌握这一技能，提升开发效率。
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
Vue项目中引用‘阿里巴巴字体图标库iconfont’(1)
m0_61043185的博客
04-02 687
分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
vue 阿里图标库的使用
weixin_38673922的博客
02-20 479
vue 阿里图标
Vue项目中使用阿里巴巴矢量图标库（IconFont)
qq_41765777的博客
11-29 858
1、搜索图标 2、加入购物车 3、添加到项目 4、生成在线css文件 5、在项目中引入在线css文件 <style> @import "https://at.alicdn.com/t/font_2835759_vy9n9k1f7o9.css"; </style> 6、使用 <i calss="iconfont icon-home"></i> <span class="iconfont icon-home></spna
vue使用阿里图标
m0_54570434的博客
11-30 1770
这样的引入是引入对应的 字体类 对其之前的颜色会去除（类似于黑白）需要自定义颜色，对于简单的图标去改变颜色用这种方式是非常友善的，不用担心fill占据。【1】（1）是示例 可去除 （2）是需要引入的 ，新建icon文件夹放入后 在main.js对应引入她的js和css。【2】复制图标代码(例：icon-icon_select) 再对应使用。【1】复制链接代码，在index.html引入。【1】复制链接代码，在index.html引入。【2】之后和 方法1 的【2】及后面步骤一样。
vue 项目中使用阿里巴巴矢量图标库
qq_43894292的博客
07-26 1762
iconfont
vue中 字体图标引入 - iconfont阿里字体图标库
weixin_42479421的博客
09-10 605
iconfont字体图标引入，fontclass方法
vue项目引用阿里巴巴图标
LiXiao_Lan的博客
07-21 412
1.登录、注册阿里巴巴图标。 2.将需要的图标添加到购物车。 3.添加到项目里面，没有项目就创建项目 4. 点击“font class”，然后在点击“下载至本地” 5.下载之后有个安装包，解压玩文件夹，里面有以下的文件，前面两个不用，可以删除 6.剩下的在项目创建一个文件夹，复制上去 7. 然后在main.js里面导入iconfont.css样式 8.最后在直接调用就行了， iconfont是第一类名，icon-yunying是第二类名。 &...
vue 项目中使用阿里巴巴矢量图标库iconfont
山有木兮木有枝 心悦君兮君不知
08-17 2848
项目引入阿里巴巴矢量图标
Vue - 项目中使用iconfont（阿里图标库）
热门推荐
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
阿里巴巴矢量图标库如何在vue项目引用
04-03
### 如何在 Vue 项目中引入和使用阿里巴巴矢量图标库 #### 方法一：通过 Unicode 方式使用图标 可以采用 Unicode 编码的方式来使用 Alibaba Vector Icon Library (Iconfont) 中的图标。这种方式需要先完成以下步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值