0

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:

enter image description here

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?

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
popo
  • 71
  • 6
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=How+can+I+put+an+icon+inside+of+an+input+bootstrap5+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Sep 19 '22 at 12:24
  • "Because all the style that I'm using is from Bootstrap 5 I can't show you what I'm using" why not? Sure you can. – Mark Schultheiss Sep 19 '22 at 12:25
  • To assist with future questions OR if this one is truly NOT a duplicate; I have updated to add a snippet of your code with the CDN for each – Mark Schultheiss Sep 19 '22 at 12:32
  • Since you're using Bootstrap 5, a tour in [its documentation](https://getbootstrap.com/docs/5.0/forms/input-group/) would solve any doubt. Bootstrap documentation is actually well done – Christian Vincenzo Traina Sep 19 '22 at 12:34
  • FWIW Your HTML as posted is invalid with duplicate ID `id="newPass" ` - you probably ONLY need one on the `` – Mark Schultheiss Sep 19 '22 at 12:35

0 Answers0