I am trying to add the search icon in a input text, but I don't know how to do it. I want to do something like:

input search

Is it possible to use Bootstrap Icon in a Placeholder? I saw some examples, but the icon didn't disappear when I was writing text

CodePudding user response：

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...' />

CodePudding user response：

You can try using position CSS set position for icon-search

<div >
   <i ></i>
   <input type="text"  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;
  }
}

or an input group Search input with an icon Bootstrap

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

CodePudding user response：

You can try this,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div >
<span ><i  style="color:black"></i></span>
<input type="text"  placeholder="Search"/>
</div>