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

在Bootstrap 5 中，您可以使用輸入組元件輕鬆將圖示新增至搜尋輸入.

替代方案方法：

有邊框程式的輸入群組：

<div>

使用邊框類別在輸入和圖示周圍建立邊框。

輸入群組文字：

<div>

以上是如何在 Bootstrap 中的搜尋輸入中新增圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！