让程序猿爱上设计狮的icon-font是怎么做的？

话说在很久以前，前端程序猿要在网页上放一些小icon，就要找设计狮设计之后切图给他，再写代码引用这个图片，给他定好位置和大小。可是突然某一天老板说我们网站换个风格吧！于是设计狮呼哧呼哧地重新把这套icon改个颜色给程序猿，程序猿再换上图片引用源。

好像很完美。但是要是老板隔一段时间就要换个风格呢？设计狮和程序猿都会疯的。但是现在有一套方案，可以让程序猿爱上设计狮，这就是icon-font。简单来说，就是把网站上用的一套icon变成字体，程序猿在使用时就像控制文本一样，随意改变它的颜色、大小、阴影等。

同时，icon-font还有如下优点：

1、矢量特性，放大不会模糊

2、方便修改属性，颜色、字号、阴影等用在文字上的属性都可以用

3、可以复用，后期维护方便

下面看两张放大的网页来比较一下图片图标和字体图标的效果：

icon-font大法开始：

我们的设计制作过程很简单，分这么几个步骤：

1、用矢量软件设计制作图标，导出svg格式

2、上传到这个网站https://icomoon.io/app/

3、生成字体，下载下来

好了，下面我们一起来设计制作一套icon-font吧。

step1：

用矢量软件设计制作图标（必须使用封闭曲线，不能使用描边路径），导出svg格式。这个设计狮都会的，我就不细说啦，值得注意的是生成时命名按照图标的样子使用英文命名，比如下面这个图标，你可以命名为：home.svg。这些命名以后是要在代码中使用的，所以尽量清晰易懂。

step2：

好了，假设现在你已经做了一套svg图标，现在要做的就是上传到https://icomoon.io/app/。如下图，点击网站左上角紫色的Import Icons按钮，选择svg文件（支持同时选择多个）上传即可。

我上传了一张苹果logo的svg图像，它就会显示在下面。你要是选择多张，这里就会显示多张你上传的svg图片。

你可能会注意到在Import Icons按钮右侧有四个按钮，它们分别对应的是：选择、删除、移动排序、编辑。比较奇怪的是这些操作需要先选中操作按钮，再选中需要操作的图标才起作用。一般我会用到编辑，把图标放大到顶边，修改名称等。名称一般会默认前面你自己命名的文件名，在这里也可以修改。

step3：

好了，如果前面都没有问题，开始生成字体吧。Grenerate Font按钮在网页底部最右边，选中要生成字体的图标，点击Grenerate Font即可。底部中间的Selection(4)会显示你选中了几个图标，也就是最终你的字体有几个“字”。

现在我们会进入到这个页面，里面会有你选中的图标。网页底部右侧有一个Download按钮，本来直接点击就可以生成一套字体了，但是我们还要多做一步：点击Download按钮右边的齿轮图标，进行一些设置。

恩，这些设置项下面这样。Font Name是你自己设计的这一套字体名称，就是类似于“微软雅黑”这种东西，不过建议用英文；Class Prefix是前缀，在代码中是css类的统一前缀，默认是“icon-”，你可以更改成其它的，但建议和字体名称有关联；下面的如有不懂问问你家前端哥哥吧。

设置完成之后关掉弹层，点击Download下载，会下载一个以字体名称命名的压缩包，解压后在里面会看到如下文件：

剩下的就交给前端程序猿了，记得把这些文件给他时，要毫不在意地说：“给你一份图标字体，以后用到的地方你就对应着写class就行了，不给你切图了。”相信我，他会爱上你的。

※本文系原创文章，转载请务必注明：转载自leadream的简书。谢谢！※