制作字体图标

制作字体图标

*zhangh * 2016-06-14

制作前

1.由于制作图标是要使用SVG格式的，所以建议，尽量使用AI(illustrator)制作图标
2.当然如果设计师在PS中使用路径绘制图标再导成SVG，也是可以的

本人粗糙的操作方式：将一个个图标的路径分别复制到AI中，微调细节后，全选图标的路径将其'轮廓化描边'，再导出成SVG格式（毕竟不是专业的，所以还是得设计师来）

制作字体图标

制作图标的网站 -iconmoon

• 点击右上角红色按钮 IconMoon App
• 该网站也有很多免费图标可用下载使用
• 上传我们自己的图标（svg格式）
• 点击最上方按钮 Import Icons (即上传图标),选择所要上传的图标
• 选中图标后，点击下方 Genetate Font 按钮
• 可以修改图标名称(最好是有语义的名称)
• 点击Preferences 按钮可以修改项目名称，类名前缀等(视项目而定)
• 设置完成后，点击下方 Download 下载后缀名为 ** .zip** 格式文件

使用字体图标

• 解压文件，打开demo.html,可查看图标类名
• 把 css 和 fonts 这两个文件复制到项目中，在网页中引入css
• 再对应的标签中加上所要图标的类名即可

<span class="icon-icon07"></span>