制作字体图标
*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>