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

【问题标题】：How can I add a Bootstrap Icon in a placeholder?如何在占位符中添加引导图标？
【发布时间】：2022-01-22 01:30:27
【问题描述】：

我正在尝试在输入文本中添加搜索图标，但我不知道该怎么做。我想做类似的事情：

是否可以在占位符中使用引导图标？我看到了一些例子，但是我在写文字时图标没有消失

【问题讨论】：

stackoverflow.com/a/63160543/8384983 看看这个

【解决方案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...' />

【讨论】：

这是一个 FontAwesome 图标，而不是 Bootstrap 图标

【解决方案2】：

您可以尝试使用 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;
  }
}

或输入组 Search input with an icon Bootstrap

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

【讨论】：

我已经看过这个例子，但是当你输入时搜索图标并没有消失。

【解决方案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>

【讨论】：

我希望输入时搜索图标消失