首页 > 其他 > 详细

使用IcoMoon生成矢量图标库

时间:2019-02-21 18:00:33      阅读:211      评论:0      收藏:0      [点我收藏+]

使用IcoMoon生成矢量图标库

1、访问站点:https://icomoon.io/app/#/select

可以上传.svg(Scalable Vector Graphics)格式矢量图,导入到该平台,生成自定义的图标。

 技术分享图片

由于.svg图片需要Inkscape等专门软件打开,暂不做演示。这里直接选中网站内免费的图标做演示。

 

2登录,搜索所需要图标

下面以“wifi”图标为例,如下,选中即为添加成功。

 技术分享图片

如下图所示,所有选中的图标,执行“Generate font”,之后点击“Download”将文件下载到本地。

 技术分享图片

3解压下载的包,目录结构如下。

 技术分享图片

打开demo.html文件

如下截图各类图标引用标识,

 技术分享图片

 

4、使用demo

创建test.html文件,并将fonts目录和style.css文件拷贝到当前目录。

如下目录结构,

 技术分享图片

访问如下,

 技术分享图片

配置完成,实现了将icomon图标拷贝到本地使用。

使用IcoMoon生成矢量图标库

原文:https://www.cnblogs.com/sunnyyangwang/p/10414160.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!