艺灵设计

全部文章
×

阿里iconfont部分矢量图标会影响整个项目图标的新发现

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-09-23 11:04:21 - 阅: - 评:1 - 积分:0

摘要:
  话说昨晚匆忙之下写了篇关于阿里iconfont基线的坑,今日又做了详细的测试,结果发现部分图标会影响整个项目图标的尺寸......

话说昨晚匆忙之下写了一篇关于 血的教训之更新阿里iconfont矢量图标基线后的坑 的文章,今日又进行了详细的测试,结果又有了新的发现。

一、部分图标会影响整个项目

实在是不知道怎么用语言来形容这个问题,大致就是:当看官将某些图标放进项目后,再打包下来的项目就有问题了,而且这些图标会影响整个,是整个项目的图标!!!

废话不多说,下面将一步步演示这个发现,如果看官有兴趣,可以去阿里iconfont官网,按艺灵提供的步骤进行亲身感受一下下。

二、在阿里官网上创建项目并在本地应用

步骤:
1、登录阿里iconfont官网,地址:www.iconfont.cn,配图: 2、搜索一个【定位】图标,(其实多搜索几个也是可以的,只是这里为了方便,暂时先使用一个图标)配图: 3、点击【暂存架】--【存储为项目】--【存储为新项目】--输入名称--存储--自动跳转到项目中--点击下载到本地;配图: 4、下载后解压,打开demo.html可以看到效果。

现在只有一个图标,看不出什么问题,下面我们再来添加一个眼睛图标,艺灵也万万没有想到,添加的这个图标会让我之前的几百个图标全都出现各种异常!!!

三、某些图标会影响整个项目

我们接着去搜索一个【眼睛】图标,点击第2个并添加到暂存架,然后存储到刚才的项目中并打包下载下来。配图一张:

接下来就是见证奇迹的时刻了,我们来打开此时的demo.html页面。乍一看好像没什么区别,但仔细一对比就发现了区别,配图一张: 如果看官觉得这个不靠谱,会审查元素的看官可以审查一下,配图: 是不是更明显了一些?如果看官觉得这个还不具有说明力,可以按照艺灵昨天的文章那样,将此时的图标应用到实际中,亲自去感受一下变化吧!

至于产生这个问题的原因,艺灵不太清楚,当艺灵将眼睛的图标更换一个后,一切都恢复正常了。简单初步判断的结果是:部分图标要慎用,可能会改变整个项目中的图标尺寸!

对于上面的实验,不想去官网做测试的看官可以通过下面的链接进行下载,但艺灵还是建议看官亲自感受一下,估计某些看官曾经就像艺灵这样在不知不沉中踩了坑还浑然不觉......

四、相关资源

4.1、资源下载

  1. 正常的定位图标.zip
  2. 添加眼睛图标后出现异常.zip

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/xwzj/2016-09-23/438.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 阿里iconfont iconfont矢量图标库 @font-face iconfont图标制作 css sprite 项目管理 web前端开发 图标异常

上一篇: 血的教训之更新阿里iconfont矢量图标基线后的坑   下一篇: web网站开发之iphone6 plus微信中的一次踩坑经历

评论区