如何把阿里图标库的图标生成代码并应用于自己的项目

当框架内置图标无法满足页面效果和工作展现需求时,可使用阿里图标库。本文介绍了将阿里图标库图标引用到项目的具体步骤,包括搜索图标、添加到购物车、添加至项目、下载、复制文件、引用 CSS 文件及使用方法等。

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

有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库。那么我们如何才能够把阿狸图标库的图标引用到自己的项目中呢?耐着性子往下看吧!
阿里图标库地址:https://www.iconfont.cn/
1.根据所需搜索到想要的图标,鼠标悬停,点击添加到购物车
在这里插入图片描述
2.点击购物车
在这里插入图片描述
3.点击添加至项目
在这里插入图片描述
4.选择添加到一个项目里面,点击确定
在这里插入图片描述
5.点击font class 的选项,可以看到你添加过的图标,下面的英文对应的是图标代码,点击下载至本地。
在这里插入图片描述
6.你会的到一个download的压缩包,解压文件
在这里插入图片描述
7.复制除第一个二文件其余的文件至你的项目资源目录
在这里插入图片描述
8.引用iconfont.css至你的前端项目 请注意引用文件路径的正确性。
在这里插入图片描述
9.使用的时候

第一个类名是固定的iconfont 第二个类名是你所需要的类名,取自于fontClass代码
在这里插入图片描述

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值