我如何把字体awesome图标到我的密码输入字段

所以我一直试图把字体awesome在我的密码输入字段的最后，但我似乎不能得到它的权利。我正在尝试切换密码视图。我已经有一段时间没有编程了，我的一位老师告诉我，这是一个向别人寻求帮助的好方法。

.regform{
display: inline-block;
align-items: center;
width: 80%;
}
input[type=text], input[type=password], input[type=email] {
padding: 8px;
width: 90%;
margin-bottom: 22px;
font-size: 16px;
border-radius: 500px;
border: 2px solid #43969A;
}
input::placeholder {
color: #074B78;
}
button {
background-color: #B2D235;
border: none;
border-radius: 500px;
width: 100%;
padding: 10px 100px;
font-size: 16px;
color: #074B78;
text-transform: uppercase;
white-space: nowrap;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="regform">
<form action="">
<div class="input">
<input type="text" placeholder="Naam" required>
</div>
<div class="input">
<input type="email" placeholder="E-mail" name="email" id="email" required>
</div>
<div class="input">
<input type="password" placeholder="Password" name="psw" id="psw" required>
</div>
<i class="fa-solid fa-eye-slash"></i>
<button type="submit" class="registerbtn">Meld je aan</button>
</form>
</div>

你可以为你的图标设置一个负边距，像这样:

.regform{
display: inline-block;
align-items: center;
width: 80%;
}
input[type=text], input[type=password], input[type=email] {
padding: 8px;
width: 90%;
margin-bottom: 22px;
font-size: 16px;
border-radius: 500px;
border: 2px solid #43969A;
}
input::placeholder {
color: #074B78;
}
.fa-eye-slash {
margin-left: -35px;
}
button {
background-color: #B2D235;
border: none;
border-radius: 500px;
width: 100%;
padding: 10px 100px;
font-size: 16px;
color: #074B78;
text-transform: uppercase;
white-space: nowrap;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/> 
</head>
<body>
<div class="regform">
<form action="">
<div class="input">
<input type="text" placeholder="Naam" required>
</div>

<div class="input">
<input type="email" placeholder="E-mail" name="email" id="email" required>
</div>

<div class="input">
<input type="password" placeholder="Password" name="psw" id="psw" required>

<i class="fa-solid fa-eye-slash"></i>
</div>
<button type="submit" class="registerbtn">Meld je aan</button>
</form>
</div>
</body>
</html>

当然，你仍然需要使它成为一个按钮(但这是另一个问题)。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/> 
<style>

.regform{
display: inline-block;
align-items: center;
width: 80%;
}
input[type=text], input[type=password], input[type=email] {
padding: 8px;
width: 90%;
margin-bottom: 22px;
font-size: 16px;
border-radius: 500px;
border: 2px solid #43969A;
}
input::placeholder {
color: #074B78;
}
.fa-eye-slash {
margin-left: -35px;
}
button {
background-color: #B2D235;
border: none;
border-radius: 500px;
width: 100%;
padding: 10px 100px;
font-size: 16px;
color: #074B78;
text-transform: uppercase;
white-space: nowrap;
}
</style>
<body>
<body>
<div class="regform">
<form action="">
<div class="input">
<input type="text" placeholder="Naam" required>
</div>

<div class="input">
<input type="email" placeholder="E-mail" name="email" id="email" required>
</div>

<div class="input">
<input type="password" placeholder="Password" name="psw" id="psw" required>

<i class="fa-solid fa-eye-slash"></i>
</div>
<button type="submit" class="registerbtn">Meld je aan</button>
</form>
</div>
</body>

相关内容

最新更新

热门标签：