码迷,mamicode.com
首页 > 其他好文 > 详细

如何合并两个图标库

时间:2017-07-24 00:22:07      阅读:362      评论:0      收藏:0      [点我收藏+]

标签:hicon   按钮   tar   detail   教程   share   https   展开   svg   

http://blog.csdn.net/crystal6918/article/details/52994393

 

最近在项目中碰到了要合并两个icon库的需求:我们项目本来用的是bootstrap提供的glyphicons,但是现在需要用一个别的库的icon,想把这两个库合并在一起供项目使用,研究了一番后整理个教程吧~

利用https://icomoon.io/app/#/select 这一工具进行这两种图标库的合并,操作步骤如下:

导入图标库

点击页面左上角的import icons,分别导入我们本地的两个字体,注意此时只导入各个图标库的.svg文件。 
技术分享

现在我们已经成功地把本地原来的图标库和新图标库导入进来了:

技术分享

合并图标库

接着就是选择我们需要合并的图标,一般情况下,就是全选这两个图标库的所有图标就可以了:

1.点击图标库名称左边的三角展开该图标库:

技术分享

2.单击每个图标库右侧的汉堡按钮,在弹出的菜单中选择select All。这样就全选了该图标库的所有图标:

技术分享

对第二个图标库也进行同样的两步操作。

然后我们就可以看到页面中所有图标都被我们选中了,最下方的selection显示我们一共选择了262个图标,接下来点击右下角的Generate Font去生成字体。

技术分享

生成新图标库

进入生成图标页面,点击上方的Preferences,我要设置一下合并之后图标库的名称,起名叫做为glyphicons-halflings-regular.(和我们原来项目使用的字体文件名称一致,这样只需替换文件而无需在CSS中更改文件名)。

技术分享

设置完成后点击页面右下角的Download就可以下载了~

技术分享

 
0

如何合并两个图标库

标签:hicon   按钮   tar   detail   教程   share   https   展开   svg   

原文地址:http://www.cnblogs.com/zaifeng0108/p/7226507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!