现在是移动互联网时代，而随着这个时代的到来网页设计也偏向于扁平化，对于很多网页使用的图标都不再像以前那样使用一些写实的图标了，而都是使用一些扁平化的图标了。当前，不管是在PC端还是在移动端，很多icon图标都进行字体化。

icon图标字体化带来的一个非常明显的好处就是使得网页体积减小，同时在移动端将有更好的清晰度，其次从某种程度上对我们的图标维护更加简单（当然有的时候却可能更加复杂，但我依然认为大多数情况下是更加简单的）。icon字体化其实本质上还是图片，只是是矢量的而已，UI设计师可以自行设计，当然也可以直接引用第三方已经设计好的库，这样的库有非常之多。

而当你接触阿里巴巴Iconfont后，你会发现这个平台非常强大，因为它可以自定义增加删除及修改你自己的库，你可以自己制作自己的库，也可以从N个库中选择一个或多个图标然后叠加起来创建一个新的项目，然后可以动态维护这个库。其官方是这样说的：

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

但最近在使用这个平台的时候发现了一个问题，一个项目拉进大概40个图标的时候使用是非常正常的，而加入一些图标的时候发现诡异的一幕出现了——所有图标占的高度非常高，而且图标顶在顶部，这显然不是我们所希望看到的。

我想大概所有人首先想到的不是Iconfont的问题，而是自己CSS的问题，但后来证明不是这样的，而真真切切是Iconfont的问题。

如上图，左边就是标题中提到的诡异的问题，而右边就是一个正常的情况；而且左边这个诡异的问题只会在ios和安卓等移动设备上出现。如果你还没看到诡异的问题，那么你的眼力就不够好了，看左边图标下面的空隙就知道了。而上述两个对比都是直接从平台下载，还没加入任何其他代码的demo。

最后删除最近添加的几个图标即解决以上问题；初步认定应该是新增加的图标中的某一个或者某几个图标存在问题导致整体出问题，而且不管你是使用其他的css来控制总不是不尽完美。因此，可以断定这个平台中某一些图标是有问题的。

个人觉得，在没有更好的解决方案之前，最好避免这种问题出现的方法就是每次添加图标更新后及时查看使用到图标地方的状态，免得多次添加后，其中的某个图标出问题却不知道是哪一个，那样的筛选成本会很高。