我们在做网站的时候，时常会遇到类似于下面的这种小图标，
我们以前一般都是切图，但有次无意中在网页中看到人家写的并没有使用背景图片，觉得很神奇，遂研究之，学习之，实验之，终于找到 了做这种小图标的方法。在此，非常感谢张鑫旭博客里面的 如何灵活利用免费开源图标字体-IcoMoon篇对我帮助很大，大家也可以移步去看看~
具体地址是：http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/
下面是我自己具体的做法，步骤大致分为复制图标路径-----打开ai,新建文件，粘贴-----将路径填充一个颜色-----保存为.svg格式-----打开网址https://icomoon.io/app/#/select-----上传你刚刚保存的.svg-----输出即可。
以下分步为大家讲究，以
小图标为例：
1-----复制图标路径（选中小图标，复制大家都会吧~~）
2-----打开ai,
，这个工具可以百度下载，新建一个文件，文件的长宽跟你复制的图标的长宽保持一致就可以了。
3-----粘贴你刚刚提制的小图标路径，弹出下面的框，选择第一个就可以了：
得到下面的这个样子：
4-----将这个随便填充一个颜色，得到下图：
5-----重点来了！！！将文件“存储为……”选择“svg”格式，如下图：
后面的都选择默认的即可了。
6-----打开网址：https://icomoon.io/app/#/select，这个网站专门制作小图标的~比我看到的任何一个制作图标的网站都好用~
7-----点击“Import Icons”按钮（如下图），上传你刚刚做好的.svg文件
8-----接下来，神奇的事情出现了。。duang~duang~duang~~新鲜出炉的图标做好了~
9-----使用方法：
选中它，点击网页底部的的按钮
，有个文件包，解压文件，里面有个模板，看它怎么引用的，你就跟着怎么引用就行了~好想说句So Cool~~哈哈~
Ps：小图标的选中，删除，编辑，修改属性对应这四个小按钮
。操作顺序是先选中你要操作的动作对应的图标，再选择图标~
大家还要学会用右侧导航的功能：
具体怎么用，大家可以利用各种翻译工具，翻译过来是啥意思你就能大致明白这个是干嘛的了~简单粗暴，还特实用！