elementui reference to third-party icon

1.https: //www.iconfont.cn/ icon icon library to find the required;

2. Add to Cart icon;

3. cart, add an icon to the project.

4. Select the font class

The need to modify the color of the icon may

6. Edit the project settings icon prefix

7. downloaded to the local

 

8. vue into the project directory

Introduced in 9.main.js

import './assets/icon01/iconfont.css'

10. Modify iconfont.css file

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*重点添加代码*/
[class^="el-iconicnext"],
[class*="el-iconicnext"],
[class^="el-iconicprevious"],
[class*="el-iconicprevious"],
[class^="el-iconcircleo"],
[class*="el-iconcircleo"],
[class^="el-iconprev"],
[class*="el-iconprev"],
[class^="el-iconnext"],
[class*="el-iconnext"] {
    font-family: "iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-iconnext:before {
  content: "\e642";
}

.el-iconprev:before {
  content: "\fff";
}

.el-iconcircleo:before {
  content: "\e651";
}

.el-iconicprevious:before {
  content: "\e632";
}

.el-iconicnext:before {
  content: "\e633";
}

11.像引用elementui内部图标一样引用