Beyond icon Font

A long time ago, how do we use icons?

1. Cut diagram

2. Flattening (Sprites)

Primitive Society Ah!

Later
Cssgaga
Grunt-css-sprite

Font icon

Never met.

Emoji drawing text

Iconfont.cn uploading SVG directly

How to use Fonts

@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 '); }

Define a class to use the font

{  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;}

Get icon Encoding

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

Icon vectorization normalization, let style regression CSS

<H2class= "Icon-size">There is an icon in front of the title</H2><style>. Icon-size{content:"\3436";}</style>

Beyond icon Font