How to add icons to input fields in Bootstrap

To add icons to the Bootstrap input box, you need to combine the input group and the icon library; 1. First introduce the icon library through CDN, such as Bootstrap Icons or Font Awesome; 2. Use Bootstrap input-group component to wrap the input box and add icons in the input-group-text; 3. If using Bootstrap Icons, insert icons; 4. The icon can be placed on the left or right side of the input box, the left side is used to prompt the input type, and the right side can be used to operate buttons; 5. Support adding icons on both sides at the same time; ensure that the icon library is loaded correctly, and add aria-label to the key icons to improve accessibility, and ultimately achieve a beautiful and easy-to-use form input effect.

Adding icons to input fields in Bootstrap enhances the user experience by providing visual cues for form inputs—like search, email, password, or phone fields. While Bootstrap doesn't include icons by default in recent versions (v5 ), you can easily integrate them using icon libraries like Bootstrap Icons , Font Awesome , or Material Icons .

Here's how to add icons to input fields effectively:

1. Choose and Include an Icon Library

First, include an icon library in your project. The easiest way is via CDN.

Using Bootstrap Icons (Recommended for Bootstrap projects)

Add this to your HTML :

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

Or use Font Awesome:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

2. Use Input Groups to Add Icons

Bootstrap's input group component is designed specifically for adding addons like icons, buttons, or text before or after an input.

Example: Email Input with Icon (Using Bootstrap Icons)

 <div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-envelope"></i>
  </span>
  <input type="email" class="form-control" placeholder="Enter your email">
</div>

Example: Password Input with Eye Icon

 <div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-lock"></i>
  </span>
  <input type="password" class="form-control" placeholder="Password">
  <span class="input-group-text">
    <i class="bi bi-eye-slash"></i>
  </span>
</div>

Note : The input-group-text wrapper ensures proper spacing and styling.

3. Using Font Awesome Icons

If you're using Font Awesome, just replace the icon class:

 <div class="input-group mb-3">
  <span class="input-group-text">
    <i class="fas fa-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username">
</div>

4. Left or Right Aligned Icons

You can place icons on the left (most common) or right side of the input.

• Left : Use before the <input> element.
• Right : Place after the <input> .

Right-aligned search icon:

 <div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search...">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>
</div>

5. Combined Left and Right Icons

You can add icons on both sides:

 <div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-person"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-text">
    <i class="bi bi-check-circle"></i>
  </span>
</div>

Tips and Best Practices

• Always use <span></span> with input-group-text for consistent styling.
• Make sure the icon library is properly loaded (check browser console for 404 errors).
• For accessibility, consider adding aria-label or title if the icon conveys critical info.
• Avoid using icons purely for decoration—ensure they support usability.

Basically, combining Bootstrap's input-group with a lightweight icon library gives you clean, responsive, and professional-looking form fields. It's simple, flexible, and widely supported.

The above is the detailed content of How to add icons to input fields in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!