CSS Advanced tips icon font Iconfont How to use video

Icon Font Iconfont

This is a font that has a lot in common with SVG.
It is vector, zooming in and out of distortion. Very and very small. We make it look like a word.
Fonts are supported from IE4 onwards. Very good compatibility
The only trouble is to make trouble.
More and more websites are starting to use this icon font. In some places, we do not use the sprite image, directly with the icon font.

use of the icon font

The production of their own trouble, we are generally online direct download, therefore, to use Iconfont fonts are divided into three steps:

1. Download the fonts from the Internet first.

Two frequently used websites:

Icomoon.io

http://iconfont.cn/Ali mom Font Library

We take Icomoon.io as the main

Open site point: Icomoon App button



Go on

 
 
 2.  declaring Fonts

So much is to be compatible with the browser, so, we just copy it, optimistic path
@font-face {
font-family:  ' Iconfont ';
 src: url (' Iconfont.eot ');  /* ie9*/
 src: url (' Iconfont.eot? #iefix ')   Format (' Embedded-opentype '),  /* ie6-ie8 */
url (' Iconfont.woff ')  format (' Woff '),  /*  chrome, firefox */
 url (' Iconfont.ttf ')  format (' TrueType '),  /* chrome, Firefox , opera, safari, android, ios 4.2+*/
url (' Iconfont.svg#uxiconfont ')  format (' svg ');  / * ios 4.1- */
 

 
3.  use font   
Each picture will correspond to a text, so this text should be remembered.
For example:
 
Copy text    add   font-family

Finally you can see the effect.

For complete operation, see video address:

     http://www.tudou.com/programs/view/LaCdxBCcrrw/