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;
        }