如何在 Bootstrap 中的搜尋輸入中新增圖示？-css教學-PHP中文網

如何在 Bootstrap 中的搜尋輸入中新增圖示？

Patricia Arquette

發布： 2024-11-16 12:27:03

原創

297 人瀏覽過

How to Add an Icon to a Search Input in 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中文網其他相關文章！