给element-ui的按钮增加图标

elementUI中的图标库是有限的，本文主要讲述 如何在已有项目中 使用iconfont中的图标。

Step1.找到iconfont项目中的图标所在地：资源管理 -> 我发起的项目(或我参与的项目)

Step2.点击“下载至本地”，下载图标库文件。

Step3.引用这6个文件：

假设将上面6个文件放到common/fonts/ 路径下，在main.js中引用：
 

import './common/fonts/iconfont.css'

在css中引用字体： 

body{
	font-family: PingFangSC-Medium, PingFang SC, iconfont;
	box-sizing: border-box;
}

Step4. 给icon-开头的类 设置样式：

[class*="icon-"], 
[class^=icon-]{
	font-family: iconfont;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: baseline;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.el-button [class*=icon-]+span{
	margin-left: 5px;
}

Step5.使用图标：

导出

效果：