网页上面的矢量小图标是如何炼成的。

我们浏览网页时可能会发现上面有很多简单的线性图标。

比如下图天猫商品分类左侧的小图标

微博下方评论小图标

嗯，就是这样一组看似很简洁却不简单的小图标

这样的小图标绘制起来不难，难就在于放在网页当中如何能保证清晰的显示，它的尺寸会非常的小，以至于低到是30px的正方形，在这样低像素的情况下，想保证在网页保持清晰，其实是非常难的。

我曾经试过各种方法，包括绘制矢量图形，存成png或web格式，可放到网站总会出现锯齿，显得十分模糊。

以前大多采用比较麻烦的方式来处理，一是运用svg矢量的图标运用到网页当中，不过我感觉很复杂，总之到现在我还没学会。另一种，是一个像素一个像素的调整，调整到不出现锯齿为止，但这种方法真的超级麻烦又费事，像我这样焦急症岂不要活活急死。

直到后来出现了新的解决方法，比如font awesome，在其网站上下载一套矢量图标，上传到自己的服务器，需要某个图标时就调用出来。但是现在几乎很少人使用这种方法了，一是占用自己服务器空间资源，二是想使用新的图标又要重新从网站上下载需要的图标，有时还不一定有自己想要的。

现在我来介绍一款比较实用的工具，iconfont（阿里巴巴矢量图标库）。顾名思义图标是矢量的，无论多大或多小都不会存在模糊状况，轻轻松解决了图标模糊的问题。不仅可以免费使用，上面还有大量已设计好的图标供你选择。

所有图标在阿里云端上存储，不占用自己服务器空间内存，还能起到网站加速作用。支持自定义上传自己设计的图标，更换添加图标只需要更新一行代码，还支持自定义改变颜色大小，总之所有的一切，都尽掌握在你的css代码中，想怎么搞就怎么搞。

具体使用，iconfont官网上讲解的已经足够详细了，你可以去浏览学习一下，如果在使用过程中有什么疑惑或新发现，也可以在下方和我留言交流学习。