制作图标字体字库 - 快车库

工具准备：

1.ps 或者 Illustrator 等
2.FontCreator 字体编辑器

操作步骤

1.在图片软件中调整好单独的图标；
2.打开FontCreator 新建个字体，定义名称，然后删成需要的样子（也可以不删）。
3.打开一个空白字符图形，点击“导入图像”，导入我们制作一个图标。
4.右击字符图形，选“属性”，调下值然后插入（这个值用在写页面的时候），做完保存。
5.打开http://www.fontsquirrel.com/tools/webfont-generator上传刚才的字体在线生成下其他格式的文件然后下载下来。
6.css写法：

CSS@font-face {
  font-family: 'fontName';
  src: url('../font/fontName.eot');
  src: url('../font/fontName.eot') format('embedded-opentype'), 
  url('../font/fontName.woff') format('woff'), 
  url('../font/fontName.ttf') format('truetype'), 
  url('../font/fontName.svg#fontNameregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  font-family: fontName;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none !important;
  background-position: 0% 0%;
  background-repeat: repeat;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
.icon-call:before {
  content: "\e600 ";
}

7.html：

HTML<i class="icon-call"></i>

完成！

题外话：这边使用的fontCreator工具，类似的工具还有很多，比如：IcoMoon和Iconfont 。道理都一样，先制作svg图标，再由svg生成字体。