Icon inside input

Bootstrap 5 Icon inside input component

Responsive Icon inside input built with Bootstrap 5. Different usage of the icons inside the inputs fields.

Basic example

  • Use an input field and remove the <label> element.
  • If you want to keep the placeholder, add placeholder=" " to the <input> element.
  • Then, add an icon along with custom CSS that will correctly position the icon inside the input field.
  • To prevent text from overlapping the icon, add padding to the left side of the <input> element.
Edit in sandbox 
<!-- User -->
<div data-mdb-input-init class="form-outline">
  <input type="text" class="form-control ps-5" placeholder="User" />
  <i class="fas fa-user ms-3"></i>
</div>

<!-- Email -->
<div data-mdb-input-init class="form-outline">
  <input type="email" class="form-control ps-5" placeholder="Email" />
  <i class="fas fa-envelope ms-3"></i>
</div>

<!-- Password -->
<div data-mdb-input-init class="form-outline">
  <input type="password" class="form-control ps-5" placeholder="Password" />
  <i class="fas fa-lock ms-3"></i>
</div>
.form-outline i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}