我試圖在輸入文本中添加搜索圖標，但我不知道如何做。 我想做這樣的事情:

輸入搜索

可以在占位符中使用引導圖標嗎？我看到了一些例子，但是在我寫文字的時候圖標沒有消失

你可以嘗試使用position CSS設置圖標搜索的位置

<div class="form-group search">
   <i class="fa fa-search"></i>
   <input type="text" class="form-control" id="search" placeholder="Search">
  </div>

div.search {
  margin: 1em;
  position: relative;
  input {
    padding: 1em 1em 1em 3em;
  }
  i {
    position: absolute;
    top: 2px;
    opacity: 0.6;
    padding: 1em;
    display: flex;
    align-items: center;
  }
}

或者具有圖標引導的輸入組搜索輸入

https://www.codeply.com/go/ioPsDfyCBc

你可以試試這個，

<link rel="stylesheet" >

<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search" style="color:black"></i></span>
<input type="text" class="form-control" placeholder="Search"/>
</div>

在bootstrap 5中，你可以簡單地使用一個帶有位置相關類和透明背景的按鈕。

<form class="row">

    <div class="col-sm-12 col-lg-9">

      <input class="form-control ps-5" type="search" placeholder="Search items..." aria-label="Search">

      <button style="bottom: 20px;" class="btn bg-transparent px-2 py-0 position-relative translate-middle-y" type="submit">
        <!-- You will need to import bootstrap icons or font-awesome -->
        <i class="bi bi-search fs-5"></i>
      </button>

    </div>
    
    <div class="col-sm-12 col-lg-3">
      <!-- Here you can add a button width with w-100 class it's optional -->
      <a class="btn btn-primary w-100" href="#">Filters Items</a>
    </div>

  </form>

在輸入標簽的占位符中添加引導圖標的步驟。

首先在html中導入引導圖標或使用npm安裝，使用此鏈接了解更多詳細信息https://getbootstrap.com/docs/5.3/getting-started/download/ 之后，從圖標復制html代碼，如屏幕截圖所示。 像這樣使用占位符= & quot& amp# xF52A搜索..."注意:我是如何在占位符中添加從截圖復制的代碼的。 使用class或id font-family: bootstrap-icons為特定的輸入標簽添加這種樣式是非常重要的；