Iconfont vector Image Replacement Method-css advanced Application

Vector Icon Replacement Tutorial

First entry: http://www.iconfont.cn/

Search your Classified keywords---then add to cart

After adding the cart, download to local browser to open demo.html

Replace a class= "original style" with Iconfont

To download to the local demo inside the four files into the corresponding template folder.

Then open the corresponding folder under Style.css to find

/* Font icon area */

@font-face {

Font-family:fp-font;

Src:url (HTTP://AT.ALICDN.COM/T/FONT_1394079079_0082858.EOT);

Src:url (Http://at.alicdn.com/t/font_1394079079_0082858.eot #iefix) format (' Embedded-opentype '), URL (http// At.alicdn.com/t/font_1394079079_0406601.woff) format (' Woff '), url (http://at.alicdn.com/t/font_1394079078_ 8924356.TTF) format (' TrueType '), URL (http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format (' SVG ')

}

This section of code is commented out as follows

/* Font icon area

@font-face {

Font-family:fp-font;

Src:url (HTTP://AT.ALICDN.COM/T/FONT_1394079079_0082858.EOT);

Src:url (Http://at.alicdn.com/t/font_1394079079_0082858.eot #iefix) format (' Embedded-opentype '), URL (http// At.alicdn.com/t/font_1394079079_0406601.woff) format (' Woff '), url (http://at.alicdn.com/t/font_1394079078_ 8924356.TTF) format (' TrueType '), URL (http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format (' SVG ')

}*/

Then add the following code at the bottom of the STYLE.CSS

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

}

. iconfont{

font-family: "Iconfont"!important;

Font-size:16px;font-style:normal;

-webkit-font-smoothing:antialiased;

-webkit-text-stroke-width:0.2px;

-moz-osx-font-smoothing:grayscale; padding-left:20px

}

This will refresh the page to see the effect.

Iconfont vector Image Replacement Method-css advanced Application