vue项目引入阿里巴巴矢量图标库 ——字体图标

BUG_devil BUG_devil 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 644平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄5年
关注
原创 最新推荐文章于 2026-06-19 04:12:38 发布 644 阅读 AI 写同款· GEO 优化 ›
如何在Vue项目中使用阿里巴巴矢量图标库 首先我们需要找到阿里巴巴矢量库官网。 阅读详情

1. 打开阿里巴巴矢量图标库官网

iconfont-阿里巴巴矢量图标库

2. 下载图标步骤

（1）

在这里插入图片描述

（2） 

在这里插入图片描述 （3） 

在这里插入图片描述

（4） 

在这里插入图片描述

（5）

（6）main.js 配置 引入assets中的图标路径

 （7）页面引用图标
注意:所有的类名前面都需要加上iconfont，后面拼上你需要icon的类名

<div class="iconfont icon-xxxx"></div>

 

参考：vue项目引入阿里巴巴矢量图标库 “字体图标” 手把手步骤详解(pc端、移动端都通用)_MFG_666的博客-优快云博客_vue 引入阿里矢量图

 

收录于
vue3

当前文章被收录于：

vue3
6 篇文章 0 人学习
订阅专栏 查看详情
标签
#vue.js #前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
vue导入字体图标Iconfont， 普通静态项目导入字体图标 以前使用的字体图标普遍都是框架自带的，要是框架没有合适的就直接上阿里巴巴矢量图标库上直接下图片，都不知道怎么导入字体图标，都没什么意识去学习怎么导入自定义的字体图标。个人觉得如果以后只是单纯的想要一些字体图标而去导入一整个框架库，那就太不友好了。 以下会演示怎么在vue脚手架和普通项目中导入特定的字体图标库 特别说明一下，我使用的字体图标库是阿里巴巴矢量图标库，这个有多好用我就不多说了，这是网址：... 阅读详情

相关推荐

vue中引用阿里字体图标的方法

想在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中引用阿里字体图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！

vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）

vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）

qq_46103732的博客 5161

编译opencv4.2时出现undefined reference to `jpeg_default_qtables‘错误的解决方案

操作系统：kylinV10 opencv版本：4.2.0 在编译opencv4.2.0的版本时，出现undefined reference to `jpeg_default_qtables’的错误提示，导致openc编译中断，不能继续编译，所以这个错误必须解决。 解决方案 查看错误的名字，根据名字分析，很有可能是当前系统中没有安装jpeg第三方库，到 http://www.ijg.org/上下载最新的源码包 jpegsrc.v9e.tar.gz,按如下顺序开始编译安装： tar -xzvf jpegsr.

jndingxin的专栏 5108

vue iconfont阿里图标库的三种使用方法

1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..

GKISX1216的博客 5584

CANopen中SDO、PDO字典以及COB-ID理解

CANopen SDO PDO

sunarmy的专栏 2万+

LabVIEW机器视觉通用软件

LabVIEW 通用视觉一款仿C模式的思想与方法 全网最精简零基础+通用视觉全套视频教程 只想把LabVIEW当作一种兴趣，结果却当成了职业 http://t.elecfans.com/c1181.html 本次（开源 ）针对有一定视觉基础或项目开发经验的工程师量身打造视觉通用性系统（完全仿面向对象的原理），相对于一般的非标框架更具功能性，有效的解决复杂项目开发过程中的思路瓶颈。 LabVIEW通用视觉系统：通用软件可快速解决大部分简单的视觉开发项目，帮助众多软件工程师解决在非标视觉软件开发中的繁琐过程问

qq_21516871的博客 4611

vue中 字体图标引入 - iconfont阿里字体图标库

iconfont字体图标引入，fontclass方法

weixin_42479421的博客 682

第四次工业革命如何重构产业逻辑：写给技术人的趋势推演

第四次工业革命正在以人工智能、大数据和新能源为核心重构全球产业逻辑。本文从历史规律切入，指出技术革命本质是生产力跃迁和产业链话语权的转移。当前AI基础设施竞赛已形成算力、数据、算法三大支柱，其中算力投资首超石油领域，绿色算力与新型架构成为关键。数据治理带来隐私计算等新技术约束，数据中心正向液冷技术和"东数西算"模式演进。技术人需构建三大竞争力：夯实分布式系统等底层能力、培养跨领域知识融合能力、善用约束条件驱动创新。这场变革将奖励那些深度理解技术本质并能快速适应的实践者。

几十年资深高级架构师，技术专家的技术笔记。专注C、Java、Python、微服务、云原生、AI工程化及高并发系统分布式架构实战，分享源码剖析、性能调优与架构治理经验。 294

Vue--引入字体图标的方式

vue引入字体图标

eiai007的博客 3520

STM32F407单一定时器输出4路不同频率及占空比的PWM波

STM32F407单一定时器输出4路不同频率及占空比的PWM波

qq_43868701的博客 4920

GNSS接收机性能测试全攻略：从实验室到真实场景

本文系统介绍了GNSS接收机从实验室到真实场景的完整性能测试流程。首先通过GNSS模拟器进行射频传导测试，评估接收机的基础性能；其次进行天线OTA测试，考察整机系统表现；最后通过精心设计的外场路测，在复杂环境中验证其实际定位精度与可靠性。文章强调，只有结合可控的实验室验证与多变的外场挑战，才能对接收机性能做出全面、真实的评价。

weixin_28365523的博客 519

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

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

2401_84418948的博客 1010

AI在智能制造中的落地：从预测维护到自适应生产调度

从最新的研究与实践来看，“预测维护”和“自适应生产调度”正在成为智能制造中最先跑通闭环的两个核心场景：前者通过对设备健康的前瞻性预测，帮助企业减少非计划停机、优化备件与维护资源；后者通过对复杂生产系统的实时决策优化，使工厂能够更好地应对订单波动、设备故障和多目标约束。更重要的是，越来越多的研究与项目不再将二者视为孤立模块，而是尝试构建“设备健康—生产调度—供应链”三者联动的一体化架构。Nature在技术层面，深度学习、强化学习、多智能体系统、图神经网络和注意力机制等方法，为建模复杂工业系统提供了强大工具；

nmdbbzcl的博客 1290

Vue3 项目中引入阿里巴巴矢量图标库（Iconfont）来使用字体图标

本文详细介绍了在Vue3项目中集成阿里巴巴Iconfont字体图标的完整流程。主要内容包括：1）字体图标的概念与优势；2）从Iconfont官网创建项目、添加图标到下载资源的步骤；3）在Vue3中全局引入图标样式的配置方法；4）创建可复用的Icon组件；5）两种图标使用方式（原生和组件化）；6）高级应用如自动更新方案和图标选择器组件开发。文章提供了详细的代码示例和目录结构说明，帮助开发者高效管理项目图标资源，实现统一的图标管理系统。

weixin_45284808的博客 1131

MobaXterm简介和使用（服务器连接工具）

MobaXterm 是一个功能强大的远程计算工具，集成了许多常用的远程计算功能，包括 SSH、X11、RDP、VNC、FTP、SFTP 等。

清平乐的技术专栏 1968

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说

阿里巴巴矢量图标的下载以及在vue项目中引入使用

阿里巴巴字体图标的下载，以及字体图标在vue项目中的使用步骤（详细）

ZhengDaHui360的博客 4479

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

vue 引入 阿里巴巴矢量图标库iconfont

vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。

pamerely的博客 1768

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件，这是C++版本的破解文件

vue项目引入阿里巴巴矢量图标库 “字体图标” 手把手步骤详解(pc端、移动端都通用)

第一步打开百度搜索阿里巴巴矢量图标库 官方网址:https://www.iconfont.cn/ 然后按图片顺序进行操作就能得到想要展示的字体图标 1. 2. 3. 4. 5. 6. 在main点js中引入(路径要找到解压文件下的iconfont.css文件) 7. 8. 9. 在代码中加上上面图标的类名就可以出来所下载的图标了 注意:所有的类名前面都需要加上iconfont后面拼上你需要icon的类名就ok了 <div class="iconfont icon-xxx">&l

m0_49714202的博客 1051

vue使用小技巧之如何使用阿里巴巴矢量图标库

阿里巴巴矢量图标库介绍：设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 目前拥有icon即将突破500万。 网址：https://www.iconfont.cn 本篇文章将会为小伙伴们详细图解——在vue中如何使用阿里巴巴矢量图标！ 1、打开阿里巴巴矢量图标库网址 2、注册并登陆（略） 3、点击图标管理...

张培跃的个人博客 6390

【Vue】 element ui 引入第三方图标

一·背景 最近一个项目用到 vue 和 element ui开发前端。感觉方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的的相关教程没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。 二· 1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/ 2

而浮生若梦，为欢几何 5万+

ant design of vue自定义字体图标（阿里巴巴矢量图标库的使用）

symbol引用（阿里巴巴矢量图标库） 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。可以通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 下面是ant design of vue官网的介绍 下面介绍使用方式 1、打开阿里巴巴矢量图标库，找到项目，选择symbol方式，复制代码如：//at.alicdn.com/t/font_1848039_9sjfmhyi7iv.js 2、在项目中写入通用js文件(我是放入src下core中的my_icon.js中

weixin_45031595的博客 4330

vue中引入字体图标的方法

vue中引入字体图标的方法 引入图标后不必再把图片下载下来放到项目中，下面是我自己的操作步骤： 1.在阿里巴巴矢量图标库找好图标后，不点下载，点击购物车，添加至项目 2.若之前未添加过项目则手动新增项目，若添加过直接点击选择对应项目添加； 3.点击下载你至本地并解压 4.在自己项目中新建iconfont文件夹，将解压的文件夹中iconfont.css文件导入 5.在iconfont.css中把字体引入方式改为绝对路径 6.在main.js中引入样式 或在APP.vue中引入 7.需注意，每次新

南野子 1079

在vue项目中使用图标文字

字体图标可以从阿里巴巴的矢量图标库里下载: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1 比方说我需要一个搜索图标，可以把其先添加到购物车  在项目里可以把添加过去的icon下载下来   下载下来的压缩包解压出来有这么多文件: 其中有用的就这一...

liangtaox8的博客 2487

字体图标的使用

阿里巴巴矢量图标库官网 1，首先百度iconfont,找到阿里巴巴矢量图标库官网(http://www.iconfont.cn/),    然后注册登录,或者用github登录也行。 2，查找自己需要的字体图标，加入购物车，下载代码到本地文件夹。 3，把下载的文件添加到项目中 &lt;link rel="stylesheet" href="font_aqil4ao5abgldi/iconfont...

木木的博客 268

vue2引入阿里巴巴矢量图标库字体

vue引入字体

qq_55996699的博客 1148

如何将阿里巴巴矢量图引入vue

网址： vue使用小技巧之如何使用阿里巴巴矢量图标库 用户1272076 发表于张培跃订阅 88 助力数字生态，云产品优惠大促 腾讯云促销，1核1G 99元/1年，2核4G 1200元/3年 立即抢购 阿里巴巴矢量图标库介绍：设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转...

weixin_30675967的博客 181
上一篇： Vue3 axios安装及配置 devServer属性配置
下一篇： cookies、sessionStorage和localStorage以及vuex解释及区别
点赞 0
评论 0
书签 书签 2
BUG_devil
BUG_devil
博客等级 码龄5年 45粉丝 29原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值