在Element-UI中引入Iconfont圖標

最近在使用在Element-UI的時候發現其圖標太少了，連常用的reset，people之類的圖標都沒有，於是想引入第三方的圖標庫進行使用。在網上查找了資料後成功引入，下面就是我的引入流程：

這裏我選擇的是阿里巴巴的Iconfont，打開https://www.iconfont.cn/，創建賬號，然後選擇你要引入的圖標（加入購物車）

點擊添加至項目，然後新建一個項目

點擊跟多操作修改項目前綴，不能爲 el-icon- ，因爲這個可能會和Element-UI自帶的圖標重合

點擊生成在線CSS代碼，

複製代碼鏈接，在項目的APP.vue中引入，這時我們就可以通過 class="iconfont el-icon-mo-xxx" 的方式在項目中使用引入的第三方圖標了，如果想要去掉 iconfont 這個類直接用 el-icon-mo-xxx 來使用圖標的話我們還需要多一步操作：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  @import "//at.alicdn.com/t/font_1075796_5kpx2vwkmq3.css";

  [class^="el-icon-mo"], [class^=" el-icon-mo"] {
    font-family: "iconfont", serif !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

PS

每次新增或刪除，特別是新增如果要引入新增的圖標，要重新生成CSS文件，這時候需要把新生成的CSS文件鏈接重新在 App.vue 中引入，替換掉原來的鏈接。