How to put icon on password input form?

Megumi Yuuji 0
Viewed 39

I have this code right here for my password input:

<div class="row mb-3">
    <div class="col-md-13">
        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" 
        name="password" required autocomplete="current-password" placeholder="Password">
        <i class="bi bi-eye-slash" id="togglePassword"></i>
        @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror       
    </div>
</div>

How do I insert the icon to the rightmost part of the input form? This is my current situation:

enter image description here

css html
1 Answers

As @Antonio pointed in the comments above, and because it's obvious that you're using Bootstrap, you may use its Input Group component to achieve the desired positioning of the icon.

Here's a live demo showcasing the usage of that component:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

<div class="container p-2">
  <div class="row mb-3">
    <!-- added "input-group" class -->
    <div class="col-md-13 input-group">
      <input id="password" type="password" class="form-control" name="password" autocomplete="current-password" placeholder="Password" required>
      <!-- the eye icon now acts as the text of the input group by using "input-group-text" class -->
      <i class="input-group-text bi bi-eye-slash"></i>
    </div>
  </div>
</div>

The above demo uses BS5 so please make the necessary changes/tweaks if you're using another Bootstrap version.

ths0
Related