What is Iconfont? Introduce the benefits and use of Iconfont

is a former colleague in Taobao Net press F12 after get the surprise:

Taobao alphabet

Have you ever seen this picture of a loss? Sao years, matter, catching up!

Read this table, I want to say Iconfont this east, simply rely on the first feeling, I think of is iconfont = = Icon + font?

The actual result is as we think, the combination of icon and font is Iconfont, this technology is relatively more mature

• Domestic can see Ali Mother icon Library

• There's also a hot item on GitHub here,

• There is also a Web site to make its own icon set Fontello, will eventually generate the corresponding CSS files and font files, and also provide support for IE browser

What are the benefits of Iconfont?

1. Free change size

2. Freely Modify Colors

3. You can add some visual effects such as shadow, rotation, and transparency.

4. Compatible with IE6

The above points are not the original icon, the disadvantage is that the color is too monotonous, is a solid color.

Font-awesome is a part of the CSS file, from the name to look like the definition of icon, but \f002 \f003 what is the content of these things? Use the font editing software to open the downloaded font file and you'll understand.

Font-awesome CSS File contents

icon corresponding to the encoding

Haha, do you think this idea is great!

How to use the self-created font file?

Here to introduce is @font-face, this statement browser compatibility is also very good, including the low version of IE support is also very good. But the compatibility of the various browsers for the available fonts is not so friendly, here are the browser to the font format support
The following code is an implementation in Font-awesome

@font-face {  font-family: ' Fontawesome ';  Src:url ('.. /fonts/fontawesome-webfont.eot? #iefix &v=4.2.0 ') format (' Embedded-opentype ');  Font-weight:normal;  Font-style:normal;}. FA {  display:inline-block;  Font:normal normal normal 14px/1 fontawesome;  Font-size:inherit;  Text-rendering:auto;  -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale;}

@font-face part of the content is omitted, the source code can be seen here, first using @font-face to define a font fontawesome, and then. fontawesome font used in FA

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial