vue+elementui的输入框表单验证动态样式-含引入fontawesome图标字体

效果：

<el-form class="editForm-class" size="mini" :model="editForm" :rules="editFormRules" label-width="120px" ref="editForm">
                <el-form-item label="用户名" prop="userName">
                    <el-input class="edit-form-input" v-model="editForm.userName" suffix-icon="el-icon-success"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input class="edit-form-input" v-model="editForm.realName" suffix-icon="el-icon-success"></el-input>
                </el-form-item>
            </el-form>

scss:

.editForm-class {
    // 输入框验证方法
    .el-form-item.is-success .el-input__inner,
    .el-form-item.is-success .el-input__inner:focus,
    .el-form-item.is-success .el-textarea__inner,
    .el-form-item.is-success .el-textarea__inner:focus {
        border-color: #7bc247;
    }

    .el-form-item.is-success .el-input-group__append .el-input__inner,
    .el-form-item.is-success .el-input-group__prepend .el-input__inner {
        border-color: transparent;
    }
    .el-form-item .el-input__suffix-inner {
        display: none;
    }
    .el-form-item.is-success .el-input__suffix-inner {
        color: #7bc247;
        display: block;
        &::before {
            font-family: 'FontAwesome'; /*字体*/
            content: '\f058';
            font-size: 18px;
        }
    }
    .el-form-item.is-error .el-input__inner,
    .el-form-item.is-error .el-input__inner:focus,
    .el-form-item.is-error .el-textarea__inner,
    .el-form-item.is-error .el-textarea__inner:focus {
        border-color: #fa5555;
    }
    .el-icon-success:before {
        content: '';
    }
    .el-input__icon {
        width: 0;
    }
    .el-form-item.is-error .el-input-group__append .el-input__inner,
    .el-form-item.is-error .el-input-group__prepend .el-input__inner {
        border-color: transparent;
    }
    .el-form-item.is-error .el-input__suffix-inner {
        color: #fa5555;
        display: block;
        &::before {
            font-family: 'FontAwesome'; /*字体*/
            content: '\f057'; /*字体图标编码*/
            font-size: 18px;
        }
    }
}

关于引入字体图标编码：
1、下载：FontAwesome.otf（GitHub可down）
2、在app.vue中引入

@font-face {
    font-family: 'FontAwesome';
    src: url('./assets/style/FontAwesome.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

字体库：
https://www.bootcss.com/p/font-awesome/design.html