在线制作icon图标

时间:2021-11-24 来源:未知网络 作者:996建站网

作为合格的前端,不仅要能和产品爸爸谈谈需求,聊聊用户,还要能和后端大神扯扯数据,捣捣服务端,你还得会UI,切切图那都不算事,问题来了,设计稿到手后,很多图标我们发下切下来都是图片格式,那么我们怎么把他变成font图标呢?

—————————————————我是华丽的分割线————————————————

主题来了:

1、首先我们用浏览器打开这个网站:icomoon.io/

2、我们看头部导航栏,点击右边icomoon app按钮

在线制作icon图标插图

3、这个网站也提供了一些图标给我们选择

在线制作icon图标插图1当然我们都看不上,因为我们自己有UI,所以我可以进行导入:

点击import icons按钮,我们就可以导入我们本地的文件,注意,这里只支持SVG格式文件,所以你还需要和UI妹子说,给我们导出SVG的格式图片。

在线制作icon图标插图2

导入后,我们可以看到,本地的svg图片已经添加上来了:

在线制作icon图标插图3然后选中自己所需的图标,再点击右下角的按钮:

在线制作icon图标插图4这样就生成了我们所需要的font图标,你可以改名字,也可以修改大小,默认也可以,你开心就是最好的:

在线制作icon图标插图5接下来我们下载文件:

在线制作icon图标插图6我就已经制作好了自己font图标

在线制作icon图标插图7

接下来就可以去项目中使用了。

在线制作icon图标插图8

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序