一、前言

作为前端，我们经常和input组件打交道，通常我们都会使用prefix-icon和suffix-icon来给输入框的前后添加上图标，一般我们是直接用element的自带的图标，方便又快捷。本文用prefix-icon举例，suffix-icon同理即可。

比如下面，我们要写的密码框，那会在输入框签名带个锁头的图标，那我们直接使用自带的图标el-icon-lock就能快捷实现效果了。

    <el-input
        ref="password"
        v-model="loginForm.password"
        class="radius-input"
        prefix-icon="el-icon-lock"
        placeholder="密码"
        type="password"
      />

可惜好景不长，随着时代的发展，客户的审美也在不断提高，所以ui在设计的时候，基本不再局限于已有的图标，基本上都是怎么好看高大上就怎么来。

这不支持自定义的话，这日子可能没法过了。所以今天带大家来看看，怎么使用自定义的图标。

二、实现过程

1、可以用自定义的图标库

（1）下载iconfont相关文件

下载好iconfont.css, iconfont.eot, iconfont.woff, iconfont.tff这四个文件，

来源是从阿里巴巴图标库添加图标到项目里，然后下载项目到本地，就有这几个文件了。

（2）放到项目里

我们将其放在了项目里的 /src/icons/iconfont文件夹下

（3）在main.js引入

引入之后就可以使用自定义的图标了，因为main.js跟icons同级，所以下面写的是相对路径。

import './icons/iconfont/iconfont.css'

（4）在iconfont.css文件里添加自定义的样式图标

我定义了el-icon-login-password，添加在iconfont.css里面

.el-icon-login-password:before {
  /* content: "\e8a3"; */
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: 12px;
  filter: drop-shadow(#1b1c1d 0px 0);
  width: 14px;
  height: 14px;
  background: url('../../assets/images/login-password.svg') no-repeat;
  background-size: 100% 100%;
}

然后直接调用该样式，就能实现了

 <el-input
    ref="password"
    v-model="loginForm.password"
    class="radius-input"
    prefix-icon="el-icon-login-password"
    placeholder="密码"
    type="password"
  />

2、直接全局覆写样式

直接覆写了样式，我使用了el-icon-lock-tunnel样式。

<el-input
  ref="password"
  v-model="loginForm.password"
  prefix-icon="el-icon-lock-tunnel"
  placeholder="密码"
  type="password"
/>

通过观察dom结构可以发现，这里的before就是图标最终样式的地方，那只要覆写了这里的样式，也能实现自定义了。

我是直接在全局样式写的（需要在main.js里引入），不过好处是可以全局直接复用。

.el-icon-lock-tunnel {
  &::before {
    content: ' ';
    display: inline-block;
    margin-top: 12px;
    width: 30px;
    height: 30px;
    background: url('../assets/images/login-lock.png');
    background-size: 100% 100%;
  }
}

3、通过第三方生成专属图标库

如果项目通外网的话，还可以考虑第三方图标库的方式，比如阿里巴巴图标库。它支持自定义上传图标，自定义项目和小组成员。

使用方式有以下三种，基本上都是在线生成链接，然后引入后使用。

ps: 我是地霊殿__三無，我们下期再见。

prefix-icon和suffix-icon使用自定义图标