如何在占位符中添加引导图标？

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>