這兩天弄了個vue的小demo ，引入了iconfont 的圖示，沒想到是噩耗的開始，一直顯示的是小方塊，一步步排查踩坑把問題解決。

首先看看官方對專案引入iconfont 的介紹。

unicode引用

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');
}

第二步：定義使用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;}

第三步：挑選相應圖示並獲取字型編碼，應用於頁面

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

font-class引用

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

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

• 相容性良好，支援ie8+，及所有現代瀏覽器。
• 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
• 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
• 不過因為本質上還是使用的字型，所以多色圖示還是不支援的。

使用步驟如下：

第一步：拷貝專案下面生成的fontclass程式碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑選相應圖示並獲取類名，應用於頁面：

<i class="iconfont icon-xxx"></i>

symbol引用

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

• 支援多色圖示了，不再受單色限制。
• 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
• 相容性較差，支援 ie9+,及現代瀏覽器。
• 瀏覽器渲染svg的效能一般，還不如png。

使用步驟如下：

第一步：拷貝專案下面生成的symbol程式碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

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

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑選相應圖示並獲取類名，應用於頁面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

當然還有Android的引入，具體可以自己去看。

看起來蠻好的。首先進入iconfont 頁面。註冊賬號，可以選擇GitHub關聯登陸，先新建個專案。

然後點選圖示管理---->我的專案----》點選+號 新建專案----》名字自己取

新建專案------建立----

 1）、FontClass/Symbol字首這個很重要，一定不要寫成：el-icon-***這樣的形式。

               如果寫成這樣的字首，會和element-ui框架所帶的圖示（icon）衝突，導致你圖示顯示不出來

            2）、fontFamily隨便起一個名字，能記住就行

        4.專案建立完了，你可以往專案裡面新增自己想要的圖示了, 找到想要的圖示新增到購物車，可以通過瀏覽或者搜尋找到自己想要的圖示，然後新增到自己的專案，這裡有一個坑，千萬要記住自己是哪個專案要用，不然弄混麻煩很大，比如我隨意找了些圖示新增到了我的專案。

我這裡用的是本地引入，點選下載到本地，解壓出來

只有後面的六個檔案是有用的，拷貝一份

在vue-cli、element-ui專案中，src資料夾->assets->styles資料夾下面建立名字為icon的資料夾,將剛剛拷貝的檔案貼上到該檔案下，然後在自己的專案的main.js 中引入 iconfont.css -----> 要注意路徑的正確

開啟iconfont.css 可以看到自己的圖示字型檔案的字首之類的資訊

最後在程式碼中引用，這裡採取的是第二種方式：

 內聯樣式加個class 表示，這裡有坑二， 記得要加上自己的 FontClass/Symbol字首 ，不然顯示的是小方塊，不會報錯，再加上這個圖示自己的名字，就大功告成。

也可以採用Unicode的方法，不用圖示名字，span 標籤內插入 圖示的Unicode碼

就是類似  這樣的東西，記得加上分號，不然。。。。。  還有把圖示名字去掉

跟第一種差不多，不過個人覺得第一種更好理解。看個人喜好。

引入字型檔案後，要重啟一下服務 ----->  npm run dev  或者  npm run start 

如果按照步驟來還是出現小方塊，一定先檢查自己的每一步是否正確，還是不行，可以試著改一下舊檔案的base64 編碼換成新的。或者開啟 歷覽器除錯的 networks 看看字型檔案有沒有載入。

以上就是iconfont踩坑過程------