iconfont-The use of vector icon font_html/css_WEB-ITnose

I found a strange phenomenon: (http://m.muzhiwan.com)

The icons here are not small icon pictures? Check the elements under Firebug and it looks like this:

The source code of the page is as follows:

It’s so strange, these are all messy Is xfxxx the corresponding icon? So I became curious, and after searching on Baidu, I discovered that this is a vector icon font!

Using icon font to generate icons has the following advantages over image-based icons:
1. Freely change the size
2. Freely modify the color
3. Add shadow effects
4. IE6 can also support
5. Support other properties of image icons, such as transparency, rotation, etc.
6. You can add text-stroke and background-clip :text and other attributes, as long as the browser supports

So how to use iconfont? There are several ways:

1. Use the existing open source iconfont vector icon font library. Such as

Alibaba icon font library

http://www.iconfont.cn/

This is an icon of Alibaba M2UX font font icon font library includes Taobao icon library and Alimama icon library.

fontello

http://fontello.com/

Customize your own icon font font icon library online, or download it directly from GitHub The entire icon set, the project is also open source.

icomoon

http://icomoon.io/app/#/select

SVG format fonts that can be imported online and edited. Then download and use it. How cool!

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

This is one of my favorite font libraries Yes, updates are faster. There are currently 369 icons.

Glyphicon Halflings

http://glyphicons.com/

This font icon can be used for free under Bootstrap. Comes with more than 200 icons.

2. To create your own iconfont font library, you can use the online generation tools of the above platforms, or you can also recommend some iconfont generation tools, such as iconmoon.

3. So how to use this font icon? In fact, it is very simple. Taking the PC application as an example, it only needs to be completed in three steps:

For details on how to use the above demo, please refer to: http://www.iconfont .cn/help/iconuse.html

Reference:

http://www.iconfont.cn/

http://www.chinaz.com/design /2012/0904/272556.shtml

http://www.weste.net/2013/12-13/94697.html