如何制作自己的web字体图标

        几乎每一个网站的开发都离不开图标的使用，很多时候，我们使用的都是美工给的png图片。直接用美工给的图片固然方便，但是当图片或页面放大时，就会出现虚化现象，或者如果要变换图标颜色，就需要美工提供多张不同颜色图标。难道我们就不能制作像bootstarp图标那样可随便放大缩小，可设置颜色的字体图标吗?答案是：它能做到，我们也一定能。

1、准备你的矢量图

        我们有2中方法得到矢量图(SVG)：

        第一种、你需要能创建矢量图标的程序，并且能够输出SVG格式，比如“Illustrator”或者“iNkscape”。

        第二种、阿里巴巴矢量图标库，搜索你需要图标的关键字，例如：“手机”，总有一款适合你哦，然后选择SVG格式下载。

下载svg图标

2、用IcoMoon将SVG图标导出为web字体图标

         打开IcoMoon Web app，导入你的SVG图标，如需编辑图标，可以点击edit进入编辑模式

上传图标

点击编辑

         最终确认不需要修改后，选中要下载图标，选择右下角Generate Font，然后选择download下载

选择要下载图标

下载web字体图标

3、图标使用

        下载完成后，得到一个icomoon.zip压缩包，解压文件夹，找到并用浏览器打开demo.html，确认图标是否可以正确显示。

确认图标

        确认图标是你想要的图标后，那么我们找到fonts文件夹并打开，里面的文件就是我们字体文件所依赖的文件啦！

fonts文件夹

         然后我们将fonts文件夹和style添加到项目中，注意引用路径哦

fonts引用至项目

        最后我们就可以尽情应用啦（在标签class中添加"icon-文件名"，如icon-mobile），并且控制它就像控制文字一样方便

图标使用

是不是很方便，赶紧试试吧...