如何在占位符中添加引導圖標？

Question

我正在嘗試在輸入文本中添加搜索圖標，但我不知道該怎么做。 我想做類似的事情：

輸入搜索

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

Answer 1

Add Css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Add Js
 <script src="https://kit.fontawesome.com/yourcode.js"></script>

Add input in <form>
 <input style="font-family: FontAwesome;" placeholder='&#xf002 Search...' />

Answer 2

您可以嘗試使用position CSS set position 進行圖標搜索

<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;
  }
}

或一個輸入組搜索帶有圖標的輸入 Bootstrap

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

Answer 3

你可以試試這個

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <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>