图标字体制作
前言
对于前端开发者来说，学习图标字体的制作的非常有必要的。
敲黑板：推荐使用第二种方式（使用 Iconfont 制作字体图标）
使用图标字体的优点
- 减少图片的请求，加快网页访问速度
- 页面放大时，字体图片不失真
- 可随意修改颜色及大小
- 加快开发速度
制作图标字体
一、使用 IcoMoon 制作字体图标
在讲字体图标制作之前先来讲讲自定义图标吧！
1.自定义图标
- 访问 IcoMoon，可以看到里面有很多现成的图标。
-
如果你需要的图标这里都有，可以选择你所需要的图标，然后点击Generate Font，如图：
自定义图标.png
- 这时候会下载一个字体图标文件，这个文件的具体使用方法看下文---字体图标的使用。
2.制作字体图标
-
要制作字体图标，首先你得有svg格式的图标。（svg图片可使用AI制作）
down.svg
-
点击IcoMoon页面中的Import Icons 按钮导入你的svg图标（导入结果如下图）
Import Icons
-
选择你所需要的字体图标 点击Generate Font
操作步骤
-
点击Generate Font按钮之后会出现另外一个界面，此界面可以修改你的图标的名称，编码，以及查看对应的代码书写方法。
最后点击download下载字体图标文件（建议一开始的svg图片就修改好名称）
image.png
二、字体图标的使用
下载之后的文件夹包含demo-files，fonts，demo.html，Read Me.txt，selection.json，style.css
其中fonts，demo.html，style.css是我们需要用到的文件
- 将fonts文件夹添加到我们的项目中。（如果项目中已经有fonts则把fonts文件夹中的文件拷贝到fonts里面）
- 将style.css文件添加到项目中，并在对应的html文件中引入style.css。
-
demo.html可查看字体图标对应的class名称（相当于一个图标查看文档，非常方便快捷）
icon name
- 在使用图标时，只需在html语句中添加对应的class name即可
<span class="icon-down"></span>
注意：如果你的fonts文件夹的名称不为fonts的话，你需修改style.css中@font-face中的文件路径。
另外，字体图标也可以使用Studio制作，这种方法相对来说比较麻烦，这里就不过多介绍，有兴趣的小伙伴可以去了解一下。
----------------------------------添加于2017.9.14-------------------------------------
使用 Iconfont 制作字体图标（推荐）
优势：
- Iconfont更加有利于团队开发。
- 并且对于字体图标后期的添加，修改等也更加的方便。
- 支持多色图标（symbol方式）
Iconfont的具体使用方法官网中给出了详细的流程，动态图等。
此处便不多做介绍~~~
By : Yimi-shan
