先簡單介紹一下什么是字體圖標：
字體圖標就是一種比較特殊的字體。通過這種字體，顯示給用戶的就像一個個圖片一樣，廣泛應用於Web項目的開發 ，如下圖：
這些就是一個個字體圖標，剛開始學是不是覺得很神奇啊。
為什么要使用字體 圖標 和 使用字體圖標的優勢：
這是因為圖片不能很好地進行縮放，當圖片進行放大時會失真（即變模糊）。而且加載每一張圖片都需要一次“http請求”，因此也拖慢了整個加載頁面的時間。另外，要是沒有圖片編輯器（軟件）的話就很難對圖片進行編輯、處理等操作。
字體圖標的優勢：字體就不會有以上這些問題，字體可以進行隨意縮放，不會變形 可以的通過CSS來控制它的大小和顏色，並且每一個字符都不需要進行額外的“http請求”。當我們把字體當成文字用來寫作的時候，往往沒有想到的是，它們只是一種形狀而已。
獲取字體圖標有兩種方式
阿里矢量圖標官網：www.iconfont.cn(推薦)
國外網站：http://icomoon.io
如何使用字體圖標：
由於國外的這個網站加載速度慢，在這里我用阿里提供的圖標庫來進行演示
step 1：在瀏覽器中搜索 iconfont ,找到 阿里巴巴矢量圖標庫官網 ,然后注冊登錄，如之前有注冊過，此步驟跳過;
step 2：把鼠標移入到 圖標庫， 有一個下拉列表，選擇 官方圖標庫 ；
step 3：點擊列表中的第一個 圖標庫， 打開一個 新頁面， 並把自己喜歡的圖標添加到庫里面；
添加到庫：
step 4：右上角有一個類似購物車，你添加到庫里面的字體圖標全部在里面；
step 5：點擊添加到項目
接着網頁會自動跳轉到對應的項目里了,如圖:
下載至本地：（最關鍵的一步）
下載下來解壓后的文件如下:
step 6：如何在項目中使用字體圖標呢,其實很簡單,創建一個i標簽或者span標簽,添加一個類名 並把相對應的代碼復雜粘貼到標簽上。
打開這個 demo_index.html 只需要復制這串代碼即可 如圖：
然后把 iconfont.css 粘貼到 css 文件夾中 這是我的項目文件夾和對應的代碼：
這是在谷歌瀏覽器里看到的字體圖標(覺得字體太小的話可以通過 font-size 屬性來控制的)。
恭喜你完成了 沒有效果的話再仔細看一遍啦 。