I'm trying to put an icon of Fontawesome inside an <input>, but I'm unable to do it. Is my first time using this icons.
I need them where the red circle is:
How can I do it?
I tried using differents position and some flex I couldn't do it.
This is my html:
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="@ViewData["pass1"]" required />
</div>
Because all the style that I'm using is from Bootstrap 5 I can't show you what I'm using.
I need that the icon can be used, not only to decorate the input. When I click on it, the password is shown
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="mb-4 col-6 mx-auto">
<label for="password" class="form-label col-lg-offset-2">Password</label>
<span id="newPass" class="see_pass mx-3"><i id="eyeNewPass" class="fa-solid fa-eye"></i></span>
<input id="newPass" type="password" class="form-control" name="password" value="@ViewData[" pass1 "]" required />
</div>Can anyone help me?