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>

Alternative Approaches:

• Input-Group with Border Utils: Use the border classes to create a border around the input and the icon.

<div>

• Input-Group with Text:

<div>

The above is the detailed content of How to Add an Icon to a Search Input in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!