• 為了減少頁面的載入速度,提高使用者體驗,對於一些圖片決定使用圖示代替,但是發現element-ui的圖示少得可憐,完全滿足不了我的要求,於是決定在element-ui的專案裡引入第三方的圖示庫.

• 因為阿里巴巴海量的圖示,所以決定引入阿里巴巴的圖示庫
  阿里巴巴圖示網站:http://www.iconfont.cn/

• 下面具體介紹如何使用
  1.註冊一個阿里巴巴賬號,搜尋自己需要的圖示,新增到購物車,然後點選新增到專案,如果沒有專案就需要建立.
  
  2.點選新增到專案後,選中第二個
  
  3.點選更多操作裡面的編輯,注意字首的設定，後面的命名不能和element裡面的發生衝突
  
  4.設定後儲存程式碼到本地,然後解壓到專案裡,並對裡面的iconfont.css檔案進行修改
  

  
  5.在iconfont.css進行修改,在檔案裡新增如下程式碼

[class^="el-icon-ump"], [class*=" el-icon-ump"] {
  font-family:"fontFamily" !important;
  /* 以下內容參照第三方圖示庫本身的規則 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

6.新增之後在main.js引入圖示

import
 
 "./assets/icon/iconfont.css";

7.在你需要引入圖示的地方直接使用即可.