字体图标的绘制和使用技巧

从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，我们更希望在整个系统的前端架构中将它们做成字体库统一管理。如下图：

如果在任意一个页面只需要引用一个 css 样式就能实现库中的任意一个图标，而且只需要定义 font-size 就能控制图标的大小，是不是很方便？

我是主后端的程序员，很早以前就在项目中使用过字体图标，但是之前用于制作图标库的 svg 都是美工帮我画好，所以一直没有深究其中的原理，直到近期不得不自己制作才对其好好研究了一下。

这里先跟大家推荐两个管理字体图标库的工具网站：

icomoon.io

www.iconfont.cn/plus

icomoon 大名鼎鼎，不过个人认为 iconfont 阿里巴巴的矢量图标库更符合国人的使用习惯，可以托管图标，更方便做版本管理，不过缺点是阿里巴巴会对你上传的图标对所有人开放下载，而且每个图标必需限制在20k以内。

下面我从svg绘制和代码实现两方面将初次制作字体图标遇到的坎和大家分享一下，愿后来者不要入坑。

---

1、svg绘制

首先我们要准备的是矢量图绘制工具，这里我选择 illustrator，以下是设计师给我的原图：

好，我先直接对它导出看看效果

除了文字，所有部分都不能用，而且蓝色的背景色是不能要的，不可能以后修改了背景色还要去修改图标。

为了找到是什么原因造成的，我对图标进行了重新绘制。

导出看了一下效果

好了之前唯一可用的文字也没了，于是在 google 和百度上查，最后找到了一则制作说明：

按照要求，我对外面的这个圈，文字（要先进行创建轮廓操作），箭头，还有问号下面这个点进行了轮廓化描边

哈哈，完美！

---

其实在制作过程中还是碰到了一个小问题，因为 iconfont 要求制作完成的 svg 必须要小于 20k 才能上传，由于我之前对 illustrator 工具的不了解，按照以前使用 Photoshop 的习惯，对不需要导出的画板和图层进行隐藏，然后存储为 svg 格式，但是文件的大小一直下不来：

我一直以为是我绘制的问题，实在找不到原因，于是改变画布的大小在尝试，这种做法可能有点傻，尝试之前我就知道矢量图尺寸跟文件的大小没有一丁点关系，但是也算是瞎猫碰上死耗子，当我增加了一个小画板再存储的时候看到了：

切换小画板再储存确实让文件的大小下来了，算是临时解决问题吧，但总觉得应该有更好的方案，这么做太麻烦了，导出之前还得记住画板的序号，这太反人类了，直到有一次我无意中将工作区切换成web工作模式：

原来直接可以将绘制好的图像拖到资源导出的区域，我是在完成所有的工作之后才发现这个功能，想想浪费的时间，心塞塞的~~~

2、网页实现

解决了svg的绘制问题之后网页上实现就非常简单了，甚至iconfont都已经把代码给我们写好了：

css

svg {
    background: red;
}

html

<script src="http://at.alicdn.com/t/font_nbcbmernh4pr2j4i.js"></script>
<svg>
    <use xlink:href="#icon-trouble"></use>
</svg>

这段 js 其实就是对 svg 的一个封装，更方便我们管理图标和实现。

补充说明：用 js 封装的方式不支持 IE8 及以下版本的浏览器，此外还可以将图标生成字体文件，然后通过 css 加载，这种方式兼容性更好，不过不支持单一图标实现多色彩。

雁过留声，阅过点赞哈~~~

---

我的公众号《有刻》，我们共同成长！