制作字体图标
*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>
网友评论