Search code examples
htmlcssbootstrap-5font-awesome-5

Eye in password field does not appear using bootstrap 5

When using Bootstrap v5 and FontAwesome v5, I cannot get get the eyeball to appear to the right side of the form. Instead, it pulls the password field further to the right than the username field and the eye does not show.

<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="password" name="password" placeholder="Password" value="">
   <span class="input-group-text"><i class="far fa-eye-slash" id="togglePassword"></i></span>
</div>

Javascript

const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
   
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);

// toggle the eye icon
this.classList.toggle('fa-eye');
});
Solution

  • When the icon overlaps the input, it goes beneath the input tag. To fix this you need to set the <i> tag with a higher z-index value. Try with z-index: 100 to make it appear on top even when the input is clicked.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="password" name="password" placeholder="Password" value="">
   <i class="far fa-eye" id="togglePassword" 
   style="cursor: pointer; margin-left: -30px; z-index: 100;"></i>
</div>

    EDIT: If you want the password field and the username field to be in the same width, you can try wrapping the icon inside the input-group-text and remove the styling margin-left: -30px; z-index: 100; since input-group-text overlaps over the input field.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="password" name="password" placeholder="Password" value="">
  <span class="input-group-text">
    <i class="far fa-eye" id="togglePassword" 
   style="cursor: pointer"></i>
   </span>
</div>

    Edit 2: In your JavaScript code, you are hiding the eye icon with this.classList.toggle('fa-eye'). This function removes the class fa-eye when it is available in the classList of the togglePassword element and adds the above class when it is not available.

    I assume that you want to show hide password icons which might be the eye-slash icon when the user is currently in the text format. So you can add

    this.classList.toggle('fa-eye-slash');

    as below

    const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
   
  // toggle the type attribute
  const type = password.getAttribute("type") === "password" ? "text" : "password";
  password.setAttribute("type", type);
  // toggle the eye icon
  this.classList.toggle('fa-eye');
  this.classList.toggle('fa-eye-slash');
});

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fa fa-lock"></i></span>
  <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fa fa-lock"></i></span>
  <input class="form-control" id="password" name="password" placeholder="Password" value="">
  <span class="input-group-text">
    <i class="fa fa-eye" id="togglePassword" 
   style="cursor: pointer"></i>
   </span>
</div>