如何在 Bootstrap 中的搜索输入中添加图标？

使用 Bootstrap 使用图标搜索输入

在 Bootstrap 4 中，您不能再使用 Glyphicons 作为图标。相反，您可以将图标设置为背景或使用自定义位置的 Font Awesome 图标。

背景图像：

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

但是，此方法，可能并不总是可靠地工作。

带有自定义的 Font Awesome 图标定位：

.input-group {
  position: relative;
}

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

Bootstrap 5：

在 Bootstrap 5 中，您可以使用输入组组件轻松将图标添加到搜索输入.

<div>
<p><strong>替代方案方法：</strong></p>
<ul><li>
<strong>带有边框实用程序的输入组：</strong>使用边框类在输入和图标周围创建边框。</li></ul>
<pre class="brush:php;toolbar:false"><div>
<ul><li><strong>输入组文字：</strong></li></ul>
<pre class="brush:php;toolbar:false"><div></div>