如何在 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>

替代方案方法：

• 带有边框实用程序的输入组：使用边框类在输入和图标周围创建边框。

<div>

• 输入组文字：

<div>

以上是如何在 Bootstrap 中的搜索输入中添加图标？的详细内容。更多信息请关注PHP中文网其他相关文章！