前端——i標籤製做矢量圖

 

 

使用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

作的比較成熟的這個 矢量圖字體圖標插件  http://fontawesome.io/examples/