IcoMoon的用法（SVG转化为ICONFONT）

ICOMOON

前言

　　最近在做移动端的一个项目，在对图片处理上非常纠结。偶然得知了可以将SVG图片转换为ICONFONT，这里面的好处就不多说了，但这篇笔记的主要目的还是记录整个过程。

PNG到SVG

　　一般而言我们从UI得到的图或者自己切的图都是PNG，JPG格式的位图。而IcoMoon上只接受SVG格式的图片或者JSON。
　　所以我们第一步就是把PNG图片转换为SVG图片。
　　需要有的工具是：Inkscape。
　　
　　
　　工具打开后，选择文件→打开你自己的图片(PNG,JPG)
　　
　　

→路径→临摹位图轮廓（位图转化为矢量图）

→把底下的位图删除→另存为SVG图片

SVG图片转化为ICONFONT

　　登录ICO-MOON，点击Import Icons把SVG图片上传至ICO-MOON。
　　
　　点击小图标，选择Generate SVG & More 可以修改图标，比如位置，大小等各方面的内容。
　　
　　我这里选择了居中，Grid为16，这样到时候显示的就是16px的字体大小，可以通过font-size调整图标的大小。
　　可以批量修改，转换图片。
　　Generate Font生成字体，里面有个文件夹。
　　

使用

　　使用的时候一般是把上面的fonts文件夹放入到服务器里，然后设置一个css文件，引入该字体文件夹，例子代码如下。

　@font-face
　// 定义字体系
  font-family: 'help-icon';
  // 来源
  src:  url('../fonts/help-icon.eot?uvfg8j');
  src:  url('../fonts/help-icon.eot?uvfg8j#iefix') format('embedded-opentype'),
    url('../fonts/help-icon.ttf?uvfg8j') format('truetype'),
    url('../fonts/help-icon.woff?uvfg8j') format('woff'),
    url('../fonts/help-icon.svg?uvfg8j#help-icon') format('svg');
  font-weight: normal;
  font-style: normal;

 // 类名开头为icon-或者有icon-的
[class^="icon-"], [class*=" icon-"]
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'help-icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.icon-check_circle:before
  content: "\e900";

.icon-keyboard_arrow_right:before
  content: "\e901";

.icon-man_mark:before
  content: "\e902";

.icon-message_circle:before
  content: "\e903";

.icon-phone_circle:before
  content: "\e904";

.icon-user:before
  content: "\e905";

.icon-women_mark:before
  content: "\e906";

.icon-write:before
  content: "\e907";

content的编码号根据fonts文件夹里的svg文件确定，比如\e907。

结语

　　不知道说什么，感觉要学习的东西太多了，共勉吧。