保住你和前端的友谊一：iconfont详解

                                                    作者：Williamhiller

        最近比较流行扁平化设计，网页设计中难免会遇到有很多icon的情况，有的网站甚至会有几十个都不稀奇，那现在就产生一个问题了，作为设计师，该怎么将这些打包给前端开发人员呢？本教程主要解决这个问题，我会尽可能讲的详细一些，中间可能会掺杂一些技术方面的东西（括号内），设计师可以忽略直接往下看。

        对于新人来说，可能就会傻傻的将所有的icon都切出来，交给前端，这样做方便倒是方便了但是可能会有一个小问题，就是前端可能会砍死你。

        第一，会很乱，会产生大量的图片—如下图，而且很多时候一个icon并不是只有一种状态，鼠标移入时是要变色的，这下好了，图片数量又翻一番，这是绝对不允许的；

        第二，就是文件大小的问题，那么多图片，就算你再怎么压缩估计也会有个几百K甚至几M。所以这样是不行的

    （至于原因：用户每一次打开一个网页时浏览器就要加载里边所有的资源，每一张图片都会发起一次http请求，数量越多，文件越大就会对服务器造成的压力越大，占用更多的带宽，所以一般原则是尽量压缩加载文件的大小，减少请求的次数。比如淘宝，如果每一页都减少10K大小，全国那么多用户，每天能节约下来的流量是很惊人的，成本就大大降低）

        所以后来就出现了将所有网站中用到的图像集成在一张图片里的方法,如图京东家电的做法，这样确实减少了图片数量以及大小的问题，却又带来了其它的问题。前端开发时会很难定位，很难找准位置，完美的呈现你的设计图，而且还有一个很尴尬的问题，如果网站升级了，又添加了新的icon或删掉了一些之前的icon，该怎么办，要重新计算位置，计算大小，这显然大大限制了开发的效率，这也是前端最不想干的事，既没技术含量又浪费时间。

       （例，如果要引用第二个icon的话，设计师需要提供给前端的是每一个icon的相对该图片的坐标，以及图片的宽高等信息，然后前端会根据这些数据，一个个将icon写出来，如此忧伤）

        到此简单总结一下图片的缺点：

        1.后期维护很麻烦，比如一个icon在鼠标移入时需要改变颜色变成红色，那就需要设计师做出两套，一个是白色一个是红色，然而过一段时间要改，要变成蓝色，那只能很忧伤的重做一遍蓝色的了；或者是临时又添加了一个icon，前端要加进去又要重新计算一番。。。

        2.现在网站都比较流行响应式，尤其是在移动端，不同分辨率手机看图片效果是不一样的，你拿一个很清晰的图片在低分辨率手机里看可能会很清晰，到高分辨率手机里就模糊的一塌糊涂，那就会说了，那就多切几套图咯，不同分辨率的图片，不同分辨率手机加载不同分辨率的图片（好吧，Android开发就是这么干的，具体切图方法详见cutterman篇），然而问题是这样对前端来说太麻烦了，图片越来越多就忍了，分辨率越高文件也越大，显然这个方案不可取。。。

        3.样式很难调，基本就是你切出来什么样那就是什么样，比如我想加一个描边，加一个投影，这些都需要自己在设计稿里调好再将图片切出来，显然改起来会很麻烦。。。

        好了，说了这么多缺点让人感觉好失落，那就没有什么解决办法了吗？ 答案是有的，回答之前我们先看看新浪和淘宝是怎么做的（设计师可以忽略这一段），下图右键审查元素发现新浪和淘宝都没有出现我们熟悉的图片，那它时怎么出现的，可以看到淘宝代码里有一行事设置字体“h5-index-iconfont",答案也就出来了，原来是用的这么个东西-iconfont，新浪的是比较常规的用法，而淘宝的是比较高级的用法，本篇讲解新浪的是怎么制作的。

新浪手机版

淘宝手机版

        那么什么是iconfont呢，拆开来看就是icon font，图标字体，就是将图标制作成字体，将所有图标集成在一个字体文件里，前端通过每个图标的编码来调用这些图标。先说一下优点：

        1.可以随意缩放，因为字体文件是svg矢量图，所以无论怎么放大都不会失真

        2.可以随意改变颜色－主要是它字体的属性，可以像操作普通字体一样操作它

        3.可以使用css装饰，不透明度旋转等等，包括一切图片的属性

        4.可以快速转换状态，鼠标悬浮时（hover)，改变颜色变得如此easy

        5.本身体积更小，几十个icon的字体文件总共才十几k你信吗

        当然它的缺点还是有的：

        1.由于是字体，所以只支持纯色icon，多色彩的就不行了；

        2.兼容性问题，（IE6/IE7）当然了，这个是可以解决的；

        3.有个别极端用户，我之前就是，安装了一款浏览器字体美化插件，会让浏览器强行使用它的字体，导致我们的icon显示不出来－这是极少极少一部分人，我不说你可能都不知道还有这么个插件。

        不过跟它这么多优点相比，这点缺点又算什么呢！跟着我来一块制作一下吧。

一、首先使用AI画出自己的图标，这里我以一个关闭符号做示范，学完后自己可以制作一些复杂的icon。新建一个48px*48px的文件，制作时建议打出网格，好方便每一个icon都对齐，这样制作出来的所有图标会很整齐，视觉效果统一。

二、这里有一点需要注意一下，有描边的或用到描边的，一定要将它转换为普通路径，位置：菜单栏>对象>路径>轮廓化描边。因为即使你的描边再粗，它依然是一个很粗的线，并不是图形，是无法识别出来的，这一点一定要切记；还有就是所有轮廓填充要用一个颜色，禁止出现多个颜色。

三、导出svg格式文件，位置：文件>存储为 或直接 Control+s (Command+s)，选择svg格式，文件名随意或取该图标的名称（建议）

四、在浏览器中打开网址 icomoon.io 选择左边的icoMoon App 点击网址 https://icomoon.io/app ，或直接输入 https://icomoon.io/app/#/select 进入制作页面，这个网站本身有一些免费的icon可以随意使用，也有一些收费的，这个就看你个人意愿了。

五、进入制作页面后悔看到下边会有一些免费的icon，你可以点击选择自己想要的然后点击左上角new set from selections，也可以直接新建空项目

六、将svg文件拖拉进入项目，或者点击添加按钮直接添加，然后点击编辑再点击新添加的icon进行编辑,可以修改一下它的各种参数，大小，位置角度等。

七、点击右下角的generate icon按钮，进入生成页面，也可以点击设置按钮，来设置其它内容，例如兼容性,修改字体名称

八、点击左上角fi按钮，可以填写每个icon的描述，关键词等，点击右边的表情按钮甚至可以添加表情包（没错，通过输入提示的编码，这个表情包是可以一模一样的显示在网页中的，这也是淘宝的做法，下一篇我会详细讲解高级用法），get code按钮就是显示每个icon的不同编码

十、ok，最后一步，点击右下角的download，就会下载下来一个压缩包。至此就大功告成了，将这个压缩包扔给前端就没你什么事了。

        最后建议申请一个icomoon网站的账号，这样它就会记录你的制作纪录，下次再添加新的icon时直接在此基础上添加，当然了，你也可以直接将之前导出的svg包拖过去，再里边添加新的，但这样可能会导致编号改变，所以并不建议这样做。另外大家可以做一个自己的“图标库”，每做一个icon就添加进去，在别的项目中也可以重复利用。

        当然你，你如果真的很好奇，我也可以带你领略一下它的“风骚”，顺便测试一下刚才制作的icon能不能用。。。

        打开压缩包，直接打开里边的demo.html就可以在浏览器中看到效果。不过现在我要自己亲自测试一下。

1.改变字体大小

 2.改变字体颜色、投影、渐变、不透明度等

        好了，完全没有问题，这些恼人的样式就交给前端去写吧，不需要手动切图了，是不是很爽，iconfont初级到这就介绍完了，下期更新高级用法。

        你的支持是我最大的动力，如果你觉得本篇文章对你有帮助，那就扫一扫下边的二维码进行捐助支持一下吧。