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

字體圖標(biāo)iconfont
阿里官網(wǎng)傳送門： http://www.iconfont.cn/
打開首頁的小圖標(biāo)好漂亮哦
1）

2）

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

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

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

1）隨便選擇幾個小圖標(biāo)，添加到購物車。

2）下載代碼

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

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

5）代碼加一下樣式

6）運(yùn)行效果

顯示圖標(biāo)是黑白的，現(xiàn)在將圖標(biāo)放大點(diǎn)。

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

1)將選擇的圖標(biāo)添加至項目，如果已經(jīng)添加過項目了，直接點(diǎn)擊就好了，之前沒添加過項目，給你的項目起一個名字。

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

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

unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項目里有多色圖標(biāo)也會自動去色。
注意：新版iconfont支持多色圖標(biāo)，這些多色圖標(biāo)在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: ：自定義字庫名稱（一般設(shè)置為所引入的字庫名），后續(xù)樣式規(guī)則中則通過該名稱來引用該字庫。
src ：設(shè)置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式
srouce ：字體的加載路徑，可以是絕對或相對URL。
format ：字體的格式，主要用于瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src屬性后還有一個 local(font name) 字段，表示從用戶系統(tǒng)中加載字體，失敗后才加載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;
}

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面

3

"iconfont"是你項目下的font-family?？梢酝ㄟ^編輯項目查看，默認(rèn)是"iconfont"。

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

與unicode使用方式相比，具有如下特點(diǎn)：

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

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

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：

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

可以更改圖標(biāo)名字，改可以改圖標(biāo)的樣式。

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

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

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

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

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：

        

    
    
    
    


       

            
Unicode
            
FontClass
            

                
                Symbol
            
        

綜合運(yùn)用（在線鏈接）

    
    
    
    
    


    

            
Unicode
            
FontClass
            

                
                Symbol