如何使用阿里的iconfont

最新推荐文章于 2025-06-11 13:43:41 发布
最新推荐文章于 2025-06-11 13:43:41 发布
阅读量294 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 iconfont 文章标签： 前端 iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/strive_for_myself/article/details/84325703
本文详细介绍如何利用阿里矢量图标库（Iconfont）为前端项目添加图标资源，包括创建项目、选择图标、下载源代码及在项目中引用的方法。

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

编写前端网站时，矢量图标的使用是能够很好的丰富页面的，因此我在这里记录一下我自己关于使用阿里矢量图标库的方式。

  1. 打开Iconfont-阿里巴巴矢量图标库官网
    在这里插入图片描述

2.点击右上角第一个图标，登陆/注册自己的用户
3.创建自己的项目：点击左上角的Icons&Projects–>选择中间紫色的文件夹–>填写项目信息
在这里插入图片描述
4.创建完自己的项目之后，通过搜索选择自己需要的矢量图标，
在这里插入图片描述
第一项：收到自己的购物车中
第二项：收藏
第三项：下载图标
这里点击第一项即可。

5.点击右上角的购物车图标–>选择Add To Project，即将购物车中的图标全部放入自己的项目当中

6.这时再返回到 Icons&Projects 中
在这里插入图片描述
点击工具栏中的Download Code下载源代码。
7.最后将下载下来的源代码解压后，将里面的文件放入自己项目目录的资源下，在页面中引入css文件，通过class以及图标代码可以显示出图标。

//举个例子
//此处的 可以在iconfont自己项目图标上Copy
<i class= "iconfont">&#xe614;</i>
引入阿里icon库的方法（font-class 引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 7687
另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以。解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是。所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了。选择自己想要的图标，添加到购物车，选择【添加至项目】是阿里矢量图标库中对应图标的类名。
uni-app：阿里巴巴图标库icon的使用步骤
weixin_46162592的博客
07-28 2336
记录一下在uni-app中使用阿里巴巴图标库icon的详细步骤
阿里icon小图标在vue中的教学使用（两种主流方案）
您的博客
02-16 9648
1.小图标的前世今生。 曾几何时，H5开发还是以雪碧图作为小图标的一种处理方案；然而，随着时间迁移，在当今前端开发环境中，icon小图标的使用率越来越高，需求越来越精致。虽然Element、Iview、Vant等组件库也相应提供了一些自带的icon图标，可是在追优的PM眼中，高大上的icon小图标才是其所想要的。本着专业人做专业事的心境，挑选和使用最优，最好的小图标就成了前端开发们的一种准则。 2.阿里巴巴 -- iconfont。 在众多icon小图标的资源站中，阿里巴巴的iconfont无疑是其中
阿里图标库的使用
最新发布
weixin_44680639的博客
06-11 871
前端开发使用阿里字体图标库
使用阿里icon图标
lin_uil的博客
07-03 700
2. 解压压缩包，放入项目中，assets文件夹， 修改文件名为 iconfont，打开demo_index.html 文件，3. 切换到Font class 引用方式，更直观，并且有两个class名字， 方便调样式；5. 单个页面使用时，引入icongont.css,4. 引入 index.html 中，
如何引入阿里icon并注册全局组件
weixin_47495465的博客
11-25 364
2、ctrl+p输入html ，用css引入代码 （链接就是上图的+http:）文件夹需要两个文件：1、icon.vue 2、icon.js。3、@/components里面，建一个icon文件夹。1、打开阿里icon网站找到（资源管理->我的项目）4、在main.js注册组件。icon.vue文件代码。icon.js文件代码。
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
weixin_60387745的博客
03-07 5117
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 540
注意：如果出现“permission denied”等error信息，记住加上 sudo指令。4️⃣ 最终生成 iconfont-weapp-icon.wxss文件，放在项目中。5️⃣-1️⃣ app.wxss中引入wxss文件以及设置全局样式。2️⃣ 下载iconfont文件同时cd 切换到该目录。iconfont-tools // 生成小程序专用文件。icon开头的名称，都变成t-icon。5️⃣ 其他补充以及使用。5️⃣-2️⃣ 使用。
react+webpack+antd框架自定义使用阿里iconfont图标。
05-19
要在React+Webpack+Antd框架中使用阿里Iconfont图标，需要进行以下步骤： 1. 在阿里Iconfont官网上选择需要的图标，并将它们添加到购物车中。 2. 在购物车中选择需要的图标，并下载iconfont文件。 3. 将下载的...
Hexo博客技巧：使用阿里iconfont图标
Amnesia-Fu的博客
05-10 1307
前言 虽然Butterfly主题支持直接调用font-awesome v5图标，但是Font Awesome无论是v4还是v5支持的图标都太少了，关于国内平台的图标几乎是寥寥无几。 所以便想到可以使用阿里iconfont图标库，但官方文档中并没有介绍用法，于是只能自己来了。 具体过程 新建项目 进入阿里 iconfont 图标库，寻找你想要的图标，并且将鼠标悬停在图标上，点击购物车图标。如下图： 将你所有需要用到的图标添加入库后，点击网站右上角的购物车图标： 然后你就会来到一下界面，选择Font cl
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3861
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
阿里矢量icon的用法步骤
weixin_44207118的博客
11-26 997
第一步，找到喜欢的icon图标添加至购物车。 添加至项目，如下图然后下载至本地，然后解压缩，将压缩出来的文件复制到vscode中assets文件夹下 第二步 在main.js中引用 import ‘./assets/iconfont/iconfont.css’; 第三步在代码中使用类名或者使用unicode编码 或 3 ...
iconfont—阿里图标的使用
A____t的博客
05-05 2860
阿里图标库在项目开发过程中的应用！！！
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
weixin_42771853的博客
12-21 1万+
介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）
阿里iconfont使用教程
m0_73935181的博客
06-15 2021
一、打开iconfont官网iconfont官方网站 二、点击右上角登录并注册三、在上方搜索框中输入想要的图标四、找到自己想要的图标，点击加入库五、点击购物车图标六、创建项目，输入项目名称七、选择Unicode，点击下载本地八、将下载好的字体图标的压缩包解压，将css文件放到项目CSS文件夹中并更改路径九、在项目中创建目录并将这三个文件放进目录十、在HTML中引入iconfont.css文件十一、挑选相应图标并获取字体编码，应用于页面
阿里图标库的基本使用
热门推荐
junshangshui的专栏
08-29 4万+
一、进入阿里图标库官网站：http://www.iconfont.cn 二、选择想要的图标加入购物车(如果不想以unicode方式使用图标，那直接下载png等格式即可) 三、然后进入购物车点击下载代码   四、解压后，选择这下图五个文件复制，其它的是demo文件，告诉我们如何使用。   五、我在项目的assets目录下新建了个fonts目录来放这五个文件   六、打...
阿里ICON图标，使用教程
weixin_34250434的博客
11-22 576
1、进入阿里ICON官网http://www.iconfont.cn/ 注册登录 2、在搜索框中搜索你想要的图标 转载于:https://www.cnblogs.com/hinux/p/9946152.html
vue项目中使用阿里icon库
gcy_rose的博客
02-02 726
从阿里字体图标库新建一个项目（当然也可选择其他icon库） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190202225650587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2djeV9y...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值