What is Iconfont? Introduce the benefits and use of Iconfont

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.