超越icon font

很久以前，我们如何使用图标？

1.切图

2.拼合（Sprites）

原始社会啊！

后来
CSSGaga
grunt-css-sprite

字体图标

相见不曾相识

Emoji绘文字

iconfont.cn直接上传SVG

如何使用字体

@font-face {
  font-family: 'FontName';
  src:url('FileName.eot'); /* IE9+ */
   /* IE6-IE8 */
  src:url('FileName.eot?#iefix') format('embedded-opentype'),
  /* CR,FF */
  url('FileName.woff') format('woff'),
  /* CR,FF,OP,Safari,Android, iOS 4.2+ */
  url('FileName.ttf') format('truetype'),
  /* iOS 4.1- */ 
  url('FileName.svg#FontName') format('svg'); 
}

定义一个class使用字体

.iconfont {
  font-family: "iconfont";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

获取图标编码

<span class="iconfont">#3301</span>

图标矢量化规范化，让样式回归CSS

<h2 class="icon-size">标题前面有一个图标</h2>
<style>
.icon-size {
    content: "3436";
}
</style>