iconfont-矢量圖標字體的運用

發現一個奇怪的現象：(http://m.muzhiwan.com)

這里面的圖標竟然不是一張張小圖標圖片？Firebug下查看一下元素，竟然是這樣的：

頁面源代碼如下：

好奇怪啊，這些個亂七八糟的&#xfxxx難道就是對應的圖標？於是產生了好奇心，百度一下，發現原來這是矢量圖標字體！

使用icon font來生成圖標相對於基於圖片的圖標來說，有如下的好處：
1.自由的變化大小
2.自由的修改顏色
3.添加陰影效果
4.IE6也可以支持
5.支持圖片圖標的其它屬性，例如，透明度和旋轉等等
6.可以添加text-stroke和background-clip:text等屬性，只要瀏覽器支持

那么如何使用iconfont呢？可以有如下幾種方式：

1.使用現有的開源iconfont矢量圖標字體庫。如

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。

fontello

http://fontello.com/

在線定制你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

icomoon

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

可以在線導入的SVG格式字體，並進行編輯，然后下載來使用。很酷吧！

Font-Awesome

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

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

2.創建自己的iconfont字體庫，可以使用以上各平台的在線生成工具，也可以推薦使用一些生成iconfont的工具，如iconmoon。

3.那么具體該如何使用這種字體圖標呢？其實很簡單，以PC端的應用為例，只需要分三步即可完成：

以上demo使用方法詳情請參考：http://www.iconfont.cn/help/iconuse.html

參考文獻：

http://www.iconfont.cn/

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

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