共计 806 个字符，预计需要花费 3 分钟才能阅读完成。
最近在使用在 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 中引入，替换掉原来的链接。
