手把手制作前端图标字体

本文介绍了如何将设计师提供的SVG图标转化为字体图标,以优化项目资源和提高代码整洁度。通过使用IcoMoon App,上传SVG图标,选择需要的图标,生成并下载图标库,最后将fonts文件引入项目,实现前端图标字体的使用。
摘要由CSDN通过智能技术生成

在做新项目的时候,特别是在做定制化开发时,设计师通常会提前设计好系统中所有使用到的图标,此时前端框架中自带的图标并不能完全满足,如果直接导入项目中也可以使用,但是项目的资源会比较大,页面加载时会有一点的影响,而且代码看上去并不简洁,此时可以尝试把这些图标封装为字体图标,直接以图标格式的方式进行引用,具体步骤如下

打开网站:https://icomoon.io/

 第一步:点击右上角IcoMoon App

第二步:点击Import Icons,上传UI给的图片图标;(注:此处图标需要是svg格式,否则无法上传),上传后则可以看见我们所上传的图标,点击勾选需要转icon的图标

第三步:点击右下角按钮生成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值