iconfont使用，親測

iconfont對於前端應用來說有很多便捷：

1、自由變化大小

2、自由修改顏色

3、可以添加一些視覺效果如：陰影、旋轉、透明度。

4、兼容IE6

在線引用和下載到本地兩種方法

一。在線引用

圖標的制作和上傳可以參照官網給出的文檔： Page 1

圖標的下載和使用官網上說的不是很清楚，簡單介紹下：

1.首先在 Iconfont-阿里巴巴矢量圖標庫(微博登錄)上面將你需要的圖標點擊購物車按鈕加入“暫存架”

2.選擇完所有要用的圖標后“存儲為項目”，給它命名。然后在“圖標管理”-“圖標應用項目”中找到這個項目，獲取在線鏈接，把里面的代碼復制到CSS中。

3.在HTML中需要使用到圖標時，使用iconfont類名。

<i class="iconfont">&#xe600;</i> 

里面寫上你想用的圖標下面的Unicode：

4.然后你可以通過控制iconfont類的屬性改變圖標的樣式，比如：

.iconfont{ font-family:"iconfont"; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; padding-left:20px } 

就可以在頁面中引用和修改了。

官網中還列出了使用時候的兼容性問題及其解決方法： Page 2

原文：作者-班星燦

鏈接：http://www.zhihu.com/question/25952487/answer/71917554
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

二、放到暫存架后，點擊"下載到本地",xx.zip文件。按照demo.html文件說明進行設置

 

我再IEtester測試ie6,ie7,ie8,ie9,ie9圖標右側有方塊，按上面page2說的加display：block；不管事。ie7不顯示圖標（在線和本地），在電腦瀏覽器ie9.0.8中也不顯示

可以把這兩個結合，給她加個class，控制顏色大小等。比如我做的極速電腦的那個圖標