搞前端的朋友应该对“字体图标”这个词不陌生。为了适应越来越挑剔的屏幕，使用.png来构建网页图标和简单的图案已经基本被淘汰了。而是使用css3和svg来绘制，对于小的网页图标，我们希望在整个系统的前端架构中将其作为一个字体库来管理。如下图所示：如果只需要在任意页面引用一个css样式就可以实现库中的任意一个图标，只需要定义font-size来控制图标的大小，岂不是很方便？我是后台的程序员，很早就在项目中使用过字体图标，但是之前做图标库用的svg是美工帮我画的，所以直到最近才深究原理。制作之后才仔细研究。在这里推荐两个管理字体图标库的工具网站：icomoon.iowww.iconfont.cn/plusicomoon比较有名，但是个人觉得阿里巴巴的矢量图标库iconfont更符合国人的使用习惯。图标可以托管，做版本管理比较方便，缺点是阿里巴巴会把你上传的图标开放给大家下载，每个图标必须限制在20k以内。接下来我将从svg绘制和代码实现两个方面和大家分享第一次制作字体图标遇到的坎，希望后来者不要掉坑里。1.SVG绘图首先我们需要准备的是一个矢量绘图工具。这里我选择插画师。下面是设计师给我的原图：好的，我直接导出看效果。除正文外，所有部分均不可使用。此外，不需要蓝色背景颜色。修改背景色后无法修改图标。为了找出是什么原因造成的，我重新绘制了图标。导出来看到效果还好之前唯一可用的文字没有了，于是谷歌和百度搜索，终于找到了制作说明：根据要求，我要在外层创建文字的轮廓circle),箭头,问号下面的点勾勒勾画哈哈，完美！其实我在制作过程中遇到了一个小问题，因为iconfont要求完成的svg必须小于20k才能上传，因为之前对illustrator工具不了解，按照之前使用photoshop的习惯，我没有需要把画板和图层隐藏起来，然后存成svg格式，但是文件大小没有变小：我一直以为是我画的有问题，但找不到原因，于是尝试改了画布的大小。这种做法可能有点傻。在尝试之前我知道矢量图的大小与文件大小没有关系，但可以看作是瞎猫和死老鼠。当我添加一个小画板并保存时，我看到：切换小画板并保存它确实减少了文件的大小。是的，也算是治标不治本，但总觉得应该有更好的解决办法。这样做太麻烦了。导出前我得记住画板的序号。这太反人类了，直到我不小心切换了一次工作区。进入网页工作模式：原来可以直接将绘制的图片拖到资源导出区。我是在完成所有工作后才发现这个功能的。想想浪费的时间，心都碎了~~~2.网页实现解决了svg的绘图问题后，网页上的实现就很简单了，连iconfont都帮我们写好了代码：csssvg{background:red;}html
