iconfont使用

iconfont對於前端應用來講有不少便捷：

一、自由變化大小

二、自由修改顏色

三、能夠添加一些視覺效果如：陰影、旋轉、透明度。

四、兼容IE6

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

一。在線引用

圖標的製做和上傳能夠參照官網給出的文檔

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

1.首先在 Iconfont-阿里巴巴矢量圖標庫(github登陸)上面將你須要的圖標點擊購物車按鈕加入「暫存架」

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
}

 

就能夠在頁面中引用和修改了。

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

原文：做者-班星燦

連接：http://www.zhihu.com/question/25952487/answer/71917554
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

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

 

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