如何在 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>在Bootstrap 5 中，您可以使用輸入組元件輕鬆將圖示新增至搜尋輸入.<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>