如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法

最新推荐文章于 2025-05-03 13:30:00 发布
最新推荐文章于 2025-05-03 13:30:00 发布
阅读量3.1k 收藏 11
点赞数 3
CC 4.0 BY-SA版权
分类专栏： CSS 前端基础 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lan_shen/article/details/122275721
本文介绍了如何在阿里巴巴iconfont平台上搜索、添加和引用图标，包括搜索、购物车、项目管理、下载、引入图标的不同方式，适合前端开发者和设计师使用。

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

iconfont-阿里巴巴矢量图库
在登录好账号的前提下进行以下操作：

添加icon：

首先搜索你想要的icon名，比如：首页

首页icon
选好你想要的图——加入购物车——添加至项目（没有项目的话可以新建项目，如果需要很多icon，建议一次挑选好全部添加至项目后在下载，方便引用）——点击下载到本地——解压下好的zip文件
把解压后的文件夹放到项目里并引入
在这里插入图片描述

第一种引入方法：

打开icon文件夹里的css文件
在这里插入图片描述
打开后在文件里面找到对应的icon名称
在这里插入图片描述
在 <i> </i> 标签里面添加class="inconfont"
再把对应的icon名称里的content属性"\e70e"复制到标签里注意要加 前面要加 &#x，末尾要加 ; 组合起来如图所示：
在这里插入图片描述
然后页面就会出现 首页 图标
在这里插入图片描述

第二种

下载解压步骤一样就略过直接导入css样式文件
再打开css文件，这次主要看名称：icon-shouye
在这里插入图片描述
在class里面添加这个icon-shouye名，刷新一下页面也会出现首页图标
在这里插入图片描述

第三种

我称之为懒人做法：
找好你想要的图标后不用加入购物车直接点击下载
在这里插入图片描述
这时会出现一个弹框，点击下方的复制svg代码
在这里插入图片描述
直接在代码里面找个地方粘贴
在这里插入图片描述
页面效果
在这里插入图片描述
直接复制svg图标，默认宽高为200×200，可以根据自己需要在svg标签里更改宽高
在这里插入图片描述
例如：我改为24×24在这里插入图片描述在这里插入图片描述
以上是本人练习项目时使用到的方法，共勉~

如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1168
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
阿里矢量图标
x0572_的博客
07-27 859
矢量图标
零基础入门：在VSCode中正确引入阿里巴巴矢量图标库的完整流程
最新发布
2401_83607690的博客
05-03 1452
在浏览器中我们经常会看到一些图标比如🔍，本文将讲解如何获取这些图标元素，如何正确的将其导入VSCode以及如何设置这些元素的属性
iconfont阿里巴巴矢量图标引入方法
spring_007_999的博客
12-15 704
iconfont自定义图标引入项目
如何从阿里巴巴矢量图标库引入图标
Shirley__csdn的博客
08-22 1831
引入阿里矢量图标
阿里巴巴矢量图标库怎么使用
vingaaa的博客
08-05 557
在代码中新建一个Myicon.js文件,然后复制这段代码,接着在使用的地方,把这个Myincon.js的路径引入过去,并且使用标签。首先搜索你想要的图标,点击类似购物车的icon图标,点击添加入库,接着点击添加到项目中,也可以新建一个项目,然后就可以下载图标到你的代码文件夹中,也可以使用在线链接。
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
Yueqin0512的博客
05-18 1029
点击——>阿里巴巴矢量图标库官网 登录 将图片添加入库 购物车中查看，添加至项目 下载至本地，解压文件夹 文件夹中含有以下文件 将此文件夹重命名并放入项目文件-src-assets文件夹中 在main.js中导入图标库的css文件 import './assets/yonghu/iconfont.css' 复制图标名字，使用element-ui插入 prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1628
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
阿里巴巴矢量图标的下载以及在vue项目中引入使用
ZhengDaHui360的博客
12-23 4241
阿里巴巴字体图标的下载，以及字体图标在vue项目中的使用步骤（详细）
一个画矢量图的程序例子(原代码)
02-23
画矢量图的例子，改函数是Led显示屏通讯程序中做图部分分离出来的。 希望哪位朋友有兴趣,把表格部分也继续写完。
小程序导入阿里巴巴矢量图标库图片
笑到世界都狼狈的博客
01-02 642
1.打开阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库 2.将自己项目中需要的图片加入购物车 3.点击添加至项目 4.新建项目 5.生成在线链接 6.生成代码 7.小程序中新建wxss，将代码粘贴进去 8.全局样式中导入 9.页面中使用 ...
阿里矢量图引入方法
海贼王路飞 同学
01-15 2203
** 阿里矢量图引入方法 ** font-class引用方式引用： 引入下载文件中的css文件与js文件 在你的文件里面引入这个地址 然后再内容标签里写入  本人一直在用这种方法，推荐使用 与unicode使用方式相比，具有如下特点： 兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标，所以当...
阿里图标库iconfont如何使用
MengRui2333的博客
09-14 8913
1、在阿里图标库（http://iconfont.cn/）选择自己喜欢的一个或多个图标，效果如下图所示 2、网页右上角的小购物车， 3、这里我们选择下载代码。下载好了后在项目需要的地方解压。 4、这是我下载好的压缩文件以及解压后的文件。 5、下载好了以后，会看到有三个html文件，我们用浏览器打开，他是三种引入图标的方法，我们根据自己的需要自行选择。 6、举例子来说，我个...
Vue项目如何引入阿里巴巴矢量图
m0_70569539的博客
03-16 856
2.将本地文件的压缩包解压缩，并将里面的文件复制到项目中。4.在使用图标的时候注意加上 iconfont 前缀。3.在main.js文件中引入图标库的css文件。1.选择自己喜欢的图表并将其加入购物车中。2.将购物车中的图标添加至项目。1.先进行下载到本地。
阿里巴巴图标矢量库使用方法详解，适用于各种框架
qq_61838643的博客
08-10 8981
官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。
微信小程序——引入 iconfont 矢量图标，如何使用引用阿里巴巴矢量图标
通往成功之路的一个过客
09-19 2063
本文介绍如何在小程序中加入图标，如何使用引用阿里巴巴矢量图标
阿里矢量图标如何引用详解
weixin_69474694的博客
07-17 979
阿里矢量图标
阿里巴巴矢量图标库iconfont使用
02-21
### 如何使用阿里巴巴 Iconfont 矢量图标库 #### 注册与登录 为了能够充分利用 Alibaba 的 Iconfont 图标库，用户需先访问官方网站 https://www.iconfont.cn/ 并完成账号注册流程[^3]。 #### 创建项目并添加图标 成功登录后，在个人中心创建一个新的项目。之后可以从网站提供的大量免费图标中挑选所需，并加入到该项目内。对于特定需求，还可以上传自定义SVG文件来扩展可用资源集合[^1]。 #### 下载字体包或在线引用 当所有必要的图标都已选好时，可以选择下载整个项目的离线版本作为 WebFont 字体形式用于本地开发环境；另一种方式则是通过获取线上链接直接嵌入HTML页面头部标签里实现即时加载显示效果[^2]。 #### HTML 中引入图标 无论是采用哪种方法获得的图标引用地址，最终都需要将其正确地写入网页源码之中以便浏览器解析渲染： 如果选择了 **WebFont 方案** ，则只需复制给出的一段 `<link>` 和 `<style>` 代码片段粘贴至目标站点模板相应位置即可生效； 而针对个别场景下可能更倾向于单独调用某几个常用图形的情况，则建议利用 `@font-face` 定义规则配合 CSS 类名的方式灵活控制展示逻辑。 ```html <!-- 引入阿里巴吧Iconfont --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> <i class="iconfont"></i> ``` #### JavaScript 动态操作 (可选) 除了静态声明外，有时也希望能借助脚本动态改变界面中的某些部分所使用的具体图案。此时可以考虑结合 jQuery 或者原生 DOM API 来达到目的。下面是一个简单的例子展示了如何切换按钮上的不同状态对应的图标。 ```javascript // 利用jQuery更改类名从而更换图标 $('#myButton').click(function(){ $(this).toggleClass('active'); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值