制作字体图标

制作字体图标

*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
  • 再对应的标签中加上所要图标的类名即可

你可能感兴趣的:(制作字体图标)