自定义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; }
本文来自博客园,作者:叶子玉,转载请注明原文链接:https://www.cnblogs.com/knuzy/p/10717035.html