自定义element-ui中的图标

Posted knuzy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义element-ui中的图标相关的知识,希望对你有一定的参考价值。

element-ui图标库图标较少,比如有关于登录页面输入框里的用户名和密码的小图标就没有,这个时候可以自定义图标。

<el-input v-model="loginForm.username" placeholder="用户名" type="text" prefix-icon="el-icon-login-user">
<el-input type="password" placeholder="密码" v-model="loginForm.password"
 @keyup.enter.native="login" prefix-icon="el-icon-login-password"></el-input>
/* 添加用户名密码小图标 */
.login-Box>>>.el-icon-login-user{
    background: url(../assets/img/user.png) center no-repeat;
    background-size: contain;
}
.login-Box>>>.el-icon-login-user:before{
    content: "66ff";
    font-size: 16px;
    visibility: hidden;
}
.login-Box>>>.el-icon-login-password{
    background: url(../assets/img/password.png) center no-repeat;
    background-size: contain;
}
.login-Box>>>.el-icon-login-password:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
}
.login-Box>>>.el-input__prefix{
  left:10px;
}
.login-Box>>>.el-input--prefix .el-input__inner{
  padding-left: 40px;
}

 

以上是关于自定义element-ui中的图标的主要内容,如果未能解决你的问题,请参考以下文章

element-ui自定义图标使用(引入项目图标是小方框)

element-ui 树型控件自定义图标和实现单选节点功能

自定义elementui中的图标

element-ui的图标偶尔乱码问题

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程