如何使用(第三方)图标

# 如何使用(第三方)图标

element-ui 自带的图标库还是不够全，还是需要需要引入第三方 icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下。

对于我们来说，首选的当然是阿里 icon 库。

# 一. 教程

# 1. 打开 iconfont (opens new window)

element_01

图标管理 → 我的项目，点进去

# 2. 新建项目

element_02

项目名称随便写。前缀注意，不要跟 element-ui 自带的 icon (前缀为：el-icon)重名了。

设置完，点新建

element_03

注意前缀。设置完，点新建

# 3. 添加 icon

现在我们返回阿里icon首页，点进去你想要的icon库，因为没有批量导入购物车，所以一般情况下需要一个一个去点，太浪费时间，那么请在控制台输入以下代码，批量导入导

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) {
  if (i < icons.length) {
    setTimeout(function() {
      icons.item(i).click();
      auto_click(i + 1);
    }, 600);
  }
};

auto_click(0);

1
2
3
4
5
6
7
8
9
10
11
12

element_04

然后点击回车，他会把这套图库所有icon加入购物车

点页面上的购物车

element_05

把图标都添加到刚才创建的项目里

element_06

# 4. 下载至本地

设置 fontClass,然后下载到本地

element_07

下载到本地，解压

解压后你会得到这些文件，打开图中圈中的文件

# 二. 使用

# 1. iconfont.css 新增样式代码

将以下代码加进去，注意：el-icon-third是你之前设置的icon前缀，第二个el-icon-third前边有空格的

[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/

{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}