element-ui本身的图标十分匮乏,所以需要引入第三方图标库,我这里使用的是阿里的图标库,地址:http://www.iconfont.cn/
使用阿里图标库有三种方式
1)1.unicode引用
2)font-class引用---这是一种最常用的方式,网上的方案也是这种最多,但是这种方案,图标不能缩放,只能小图标
3)symbol引用--最新的方式,也是阿里最支持的,图标可以进行样式调整,并且你修改你的图标的时候只要更新一下地址就可以了,我最终也是采用的这种
我只说一下第三种方式,以及第二种方式踩过的坑
symbol引用步骤
1、http://www.iconfont.cn/注册并登录
2、选中图标加入购物车
3、添加至项目
4、复制链接
项目中
6、index.html文件中加入
<script type="text/javascript" src="http:+第4步中的链接地址"></script>
7、使用
<svg class="icon" aria-hidden="true">
<use xlink:href="#el-icon-course-vertical-align-top"></use>
</svg>
8、样式(必须要有,我刚开始没加这个,结果一直不显示)
.icon {
width: 40px;
height: 40px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
font-class引用踩过的坑:
创建项目的时候:前缀与Font Family必须要改,我刚开始使用的默认的,结果一直显示小方框,不显示图标。