How to Add an Icon to a Search Input in Bootstrap?

Search Input with an Icon Using Bootstrap

In Bootstrap 4, you can no longer use Glyphicons for icons. Instead, you can either set the icon as a background or use a Font Awesome icon with custom positioning.

Background Image:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

This method, however, may not always work reliably.

Font Awesome Icon with Custom Positioning:

.input-group {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

Bootstrap 5:

In Bootstrap 5, you can use the input-group component to easily add an icon to a search input.

<div>
<p><strong>Alternative Approaches:</strong></p>
<ul><li>
<strong>Input-Group with Border Utils:</strong> Use the border classes to create a border around the input and the icon.</li></ul>
<pre class="brush:php;toolbar:false"><div>
<ul><li><strong>Input-Group with Text:</strong></li></ul>
<pre class="brush:php;toolbar:false"><div></div>