Use icon fonts to help CSS process pictures

Because the mobile device has different resolution, PPI and other problems caused by the need for different screen resolution to adjust the optimization, such as the use of @2x pictures, max-width restrictions.

Using CSS @font-face is also a good way to display icon.

Because the icon fonts (font) is a vector graphic, it is not affected by the resolution, but also to achieve the perfect zoom, of course, can also be used on the WEB side.

Advantages

File Small

Good loading performance

CSS style support

The IE6/7 also supports

Disadvantages

Style restrictions, using flat style

There are incompatibilities on the mobile end

A small number of mobile devices and icon fonts character encoding conflicts

Cross-domain problems under FF and IE9

Performance issues

How to use

Making font Files

Can be manually made using the Font tool

You can also use online tools to automatically generate

Referenced in CSS, as follows

Introducing Font Files

CSS code copy content to clipboard

@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-* *

}

Then define a icon-* with all of our icons in a common CSS style,

CSS code copy content to clipboard

[class^= "icon-"], [class*= "icon-"] {

Display:inline-block;

Speak:none

font-family: "Iconfont";

font-size:16px;

Line-height:1;

Font-style:normal;

/** font icon appears jagged problem: * *

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

The last is to use: before to inject each icon corresponding to the font encoding

CSS code copy content to clipboard

. icon-bell:before {

Content: "03432";

}

. icon-search:before {

Content: "03433";

}