自定义element-ui中的图标

本文介绍如何在Element-UI中使用自定义图标替换默认图标,以增强登录页面的用户体验。通过修改CSS样式,可以将特定的图片用作输入框前缀图标,如用户名和密码图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值