随笔 - 44  文章 - 1  评论 - 92  阅读 - 50133

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

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

第一个类名是固定的iconfont 第二个类名是你所需要的类名,取自于fontClass代码
9.png

10.png

posted on   微凉今年一定早点睡  阅读(2318)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示