Vue Element-UI使用icon图标(第三方)–在线版

Vue Element-UI使用icon图标(第三方)–在线版

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

注意前缀不要和elementui 相同(el-icon)，会冲突

2. 寻找需要的ICON添加到刚才新建的项目中!

3.找到我的项目， 生成icon的在线css链接

4. 在VUE中引入在线CSS

• 创建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;
}

• 在index.html中引入阿里在线CSS链接(第三步生成的链接)

 <!--引用阿里项目在线的css链接-->
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2738364_1ceydtkp3hl.css"/>

• 在main.js 中引用自己创建的iconfont.CSS文件

import './assets/styles/iconfont.css' // global css

OK！可以愉快的使用了，如下：

 <i class="el-icon-ali-zuofei"></i>
  <el-button icon="el-icon-ali-zuofei1" />

效果

**

每次新增图标到项目，index.html中链接会改变，需要重新引入

**