摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。

字體圖標iconfont
阿里官網傳送門： http://www.iconfont.cn/
打開首頁的小圖標好漂亮哦
1）

2）

3)
選擇自己想要下載的格式點擊下載，下載素材和下載代碼的意思是不一樣的，這里先演示下載素材。

**下載素材：下載圖標資源，可以指定顏色、大小以及格式
下載代碼：下載字體圖標的代碼（即使官網上的圖標是彩色的，應用到項目中也是黑白且大小不變的小圖標，等一下演示。），包括demo的html和css文件、iconfont的css、js以及各種字體文件。 添加至項目：建立一個自己的圖標庫，將圖標整合在一起，方便后續應用在自己的實際項目中。**

4）加在代碼中看一下效果

1）隨便選擇幾個小圖標，添加到購物車。

2）下載代碼

3）將壓縮包解壓，將iconfont.css添加到自己的項目中，并且在項目中引用這個css文件。

4）打開壓縮包中的demo_fontclass.html文件，會看見圖標的名字。

5）代碼加一下樣式

6）運行效果

顯示圖標是黑白的，現在將圖標放大點。

可以知道，這種方式得到的圖標的內容大小是不變的。
想要將圖表內容變大，可以在iconfont.css文件中改動。將16px改成50px。

1)將選擇的圖標添加至項目，如果已經添加過項目了，直接點擊就好了，之前沒添加過項目，給你的項目起一個名字。

右上角的“下載至本地”就是下載該圖標庫的代碼到本地，代碼包括demo的html和css文件、iconfont的css、js以及各種字體文件，demo是使用說明，iconfont文件是使用這個圖標庫所必須的文件，可根據使用的具體方式引用相應文件（就是剛才說的下載代碼那種方式，不逼逼了）。

左上角的三種方式
Unicode、Fontclass、Symbol：三種使用的方式，在下載到本地的代碼中找到demo，demo的html文件中有這三種方式的詳細使用說明（我就直接將內容粘貼過來了 小聲逼逼o3o）。
注意：如果在圖標庫中新增加了圖標，則需要更新在線鏈接并把該鏈接重新引入到實際項目中，或者重新下載代碼到本地，然后在實際項目中引入最新的iconfont文件。

unicode是字體在網頁端最原始的應用方式，特點是：

兼容性最好，支持ie6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
注意：新版iconfont支持多色圖標，這些多色圖標在unicode模式下將不能使用，如果有需求建議使用symbol的引用方式

unicode使用步驟如下：
第一步：拷貝項目下面生成的font-face

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"),
  url("iconfont.woff") format("woff"),
  url("iconfont.ttf") format("truetype"),
  url("iconfont.svg#iconfont") format("svg");
}

**font-family: ：自定義字庫名稱（一般設置為所引入的字庫名），后續樣式規則中則通過該名稱來引用該字庫。
src ：設置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式
srouce ：字體的加載路徑，可以是絕對或相對URL。
format ：字體的格式，主要用于瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src屬性后還有一個 local(font name) 字段，表示從用戶系統中加載字體，失敗后才加載webfont。**
第二步：定義使用iconfont的樣式

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

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

3

"iconfont"是你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。

2）font-class
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

與unicode使用方式相比，具有如下特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。
相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：

第一步：引入項目下面生成的fontclass代碼：

第二步：挑選相應圖標并獲取類名，應用于頁面：

"iconfont"是你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。
Unicode方式和FontClass方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的unicode引用而已
icon-xxx是使用了unicode引用的類名，可在下載的demo.html中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。xxx是圖標的名字，你可以在網站上修改圖標的名字（FontClass和Symbol都可以），但是切記如果你使用了在線鏈接，則必須在網站上更新在線鏈接，然后將該鏈接更新到你的項目中，如果你是本地使用，則必須下載最新的代碼，然后更新到你的項目中，否則修改無效

可以更改圖標名字，改可以改圖標的樣式。

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：

支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
兼容性較差，支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。
使用步驟如下：

第一步：引入項目下面生成的symbol代碼：

第二步：加入通用css代碼（引入一次就行）：

第三步：挑選相應圖標并獲取類名，應用于頁面：

        

    
    
    
    


       

            
Unicode
            
FontClass
            

                
                Symbol
            
        

綜合運用（在線鏈接）

    
    
    
    
    


    

            
Unicode
            
FontClass
            

                
                Symbol