How do I put the font awesome icon into my password input field

user_19343018 0
Viewed 64

So I've been trying to put the font awesome in my password input field at the end but I can't seem to get it right. I'm trying to make a toggle password view. I haven't been coding for a while and one my teachers told me this was a good way to ask other people for help.

.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>

css html
2 Answers

   <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>

user_193177940

You can do this by setting a negative margin for your icon, like so:

 .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>

Of course you still need to make it a button (but that's another question).

user_175163940
Related