CSS3 Fonts icon

Using the @ font-face rule, you can set the font icon
Advantages: Fonts icon traditional icon compared to, you can freely set the size, change color. I do not like the position of the sprite to be calculated as the background, very convenient

1. Registration fonts

font-family: Font Name
src: source font file path

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

2. Application to the elements

Css applied to the element in the class named iconfont

.iconfont{
   font-family: "webfont" !important;
}

3. font encoding

The font encoding written to the label, e.g.

<a href="javascript:;" class="iconfont">&#xe87a;</a>

4. Vector icon library Iconfont- Alibaba

Register login github account, new projects

You can browse or search for the desired icon, select Add to Cart, and then added to the shopping cart icon project

Open iconfont.css file, find the application of new fonts css class name, for example, I have here is (are likely to default class name)

.iconfont {
  font-family: "iconfont" !important;
}

Add this css class name, font encoding can view the project on the label you want to use the font icon