element中使用阿里的矢量图标

项目当中有个安全帽管理，现在用到的是element，但是发现这个框架里边带的没有帽子的图标，所以就去阿里下载了一个。具体的使用方法如下

1. 在阿里icon上创建一个给element扩展的项目

按照上图中的步骤，创建一个element扩展icon项目，注意第4点

2. 添加icon到项目中

在图标库中找到你想要的icon后，加入购物车，然后点击右上角的购物车，把icon添加到你的element扩展项目里吧~

3. 生成icon的在线css链接

4. 在Vue项目中，引用在线css链接和新建css样式文件 （重点）

4.1 在Vue项目中创建iconfont.css文件，当然名字自定义。

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

这里的 el-icon-ali 是我自己起的icon前缀名。

4.2 引用阿里项目在线的css链接

我是在index.html里面引用的。放在前面

4.3 引用自己创建的css文件（我是在main.js里引入的）

 4.4 可以在项目中使用你的icon啦~~~~