How to use Iconfont

Iconfont's role is to use the font format to replace the picture, special font display, with more is some solid color of the picture, specifically the current CSS3 properties in the custom font (@font-face) to achieve.

1, first say its advantages and disadvantages:

Advantages: The volume is smaller than the picture, can change the size and color, and the picture is not possible.

Disadvantage: Because it is a font mode, it only supports solid color, multi-color is not supported,

2. How to use:

2.1, the format of the font, different browsers support the font format is not the same, specific as follows:

*webkit/safari: Supports True Type/open Type (. ttf), ios4.2+ support. ttf,ios4.2 the following only supports SVG fonts;

*chrome: In addition to WebKit support, starting with Chrome 6, start supporting the woff format;

*firefox: Support for. TFF and. Off, supported Woff format from Firefox3.6;

*opera: Supports. TFF,. Off,. svg. Woffopera 11kaishi Zhichi Woff not yet supported;

*ie: Supports EOT format only, IE9 starts to support Woff.

2.2 Specific Use

First you need to use font software (such as Fontcreator, FontLab) to do this font, in a variety of online tools to convert to GE Hong font format:

*https://www.kirsle.net/wizards/ttf2eot.cgi Online convert TTF to EOT format;

*http://www.fontsquirrel.com/tools/webfont-generator powerful online TTF for EOT, Woff and other font formats

* In addition, the EOT file must be added to the domain name whitelist before it can be used, it is recommended to use CREATEMYEOT:

After the fonts in several formats are converted, it is possible to define the font with Font-face in the CSS code.

HTML code:

<div class= "box" >

<span class= "Icon-home" ></span>

&nbsp;icon-home

</div>

<div class= "box" >

<span class= "Icon-home-2" ></span>

&nbsp;icon-home

</div>

CSS code:

@font-face {

font-family: ' Icomoon ';

Src:url (' Fonts/icomoon.eot ');/**ie9**/

Src:url (' Fonts/icomoon.eot #iefix ') format (' Embedded-opentype '),/**ie6-ie8**/

URL (' fonts/icomoon.svg#icomoon ') format (' SVG '),/** IOS 4.1-**/

URL (' fonts/icomoon.woff ') format (' Woff '),/**chrome, firefox**/

URL (' Fonts/icomoon.ttf ') format (' TrueType ');/**chrome, Firefox, Opera, Safari, Android, IOS 4.2+**/

Font-weight:normal;

Font-style:normal;

}

. Box span{

Color: #ff0;

font-size:20px;

font-family: ' Icomoon '; /** introduces font-face-defined font names **/

}

The value in the/*content is the corresponding value in the Iconfont icon */

. icon-home:before {

Content: "\21";

}

. icon-home-2:before {

Content: "\23";

}

This article from "Mumu" blog, declined reprint!

How to use Iconfont