Answers for "how to make search icon inside input"

css search icon inside input

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

<style>
#input_group{
  position:relative;
  width:fit-content;
}

#label{
  position:absolute;
  right:5px;
  top:50%;
  transform:translate(0,-50%)
}

#input{
  padding-right:20px;
}
</style>

<div id='input_group'>
  <label id='label' for="input"><i class="fa fa-search"></i></label>
  <input id='input' type="text">
</div>

search input html with icon

<input type="search" placeholder="Search">