用字体制作小图标

我们在做网站的时候，时常会遇到类似于下面的这种小图标，

我们以前一般都是切图，但有次无意中在网页中看到人家写的并没有使用背景图片，觉得很神奇，遂研究之，学习之，实验之，终于找到 了做这种小图标的方法。在此，非常感谢张鑫旭博客里面的 如何灵活利用免费开源图标字体-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：小图标的选中，删除，编辑，修改属性对应这四个小按钮。操作顺序是先选中你要操作的动作对应的图标，再选择图标~

大家还要学会用右侧导航的功能：

 

具体怎么用，大家可以利用各种翻译工具，翻译过来是啥意思你就能大致明白这个是干嘛的了~简单粗暴，还特实用！