fontcreator制作iconfont

第一步

在AI中画好矢量图，或者是在PS中将纯色的图片存成PNG格式，最好是放大很多倍的纯色图片。因为导入到fontcreator中会显得很小，如果不是矢量，图片拉大后就会有锯齿状。

第二步

选中AI中的矢量图形复制，打开fontcreator，选择一个已经安装过的字体或是选择新建工程，这里采用新建工程来演示。

一般前几个空着的不要动，选择A后点击插入字形就会有这样一个空白的格子，选择这个空白的格子右键

右键然后选择属性，代码点里可以从$E000开始往后写，写完后记得点击右边的闪电标志，进行检索匹配，如果没有被占用则这个代码点就可以用,名称里可以填写自己想要填写的名字。最后按应用，然后双击这个空格开始编辑，记得编辑完后，在属性里将左右边轴设置为0，这样才可以在页面显示出来。

完成后的状态如下

该字体的unicode码是$F112，名称是NAME
做完之后导出字体，在fontcreator中可以导出woff及otf格式的字体，如果需要支持其他浏览器，则选择线上转换字体格式。

第三步

在css中引用字体

@font-face {
    font-family: 'emotion';
    src: url('emotion.eot'); /* IE9*/
    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('emotion.woff') format('woff'), /* chrome、firefox */
         url('emotion.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('emotion.svg#svgFontName') format('svg'); /*  iOS 4.1- */
        }
.equip-icon{
  font-family:"emotion"; 
}

引用完之后可以在CSS里使用伪类这样写

.equip-icon:before {
content: "\F112";
}

实际页面效果如图，忽略底下的蓝色圆，这块黑色的才是。(￣▽￣”)

然后就愉快的使用吧，iconfont适合纯色的小图标，个人觉得比较适合移动端界面的设计。