在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 中引入，替換掉原來的連接。