0

I'm trying to add a search icon inside the input box but the icon is currently displayed outside the input.

Any suggestion?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<div class="col-sm-3 p-0 m-0" id="search-bar">
  <div class="input-group input-group-sm m-0 p-1">
    <input type="search" class="form-control-sm p-0 m-0 align-items-center" id="search-item" placeholder="  search.." style="height:16px;width:30%;border-radius:10px">
    <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
  </div>
</div>
j3ff
  • 5,719
  • 8
  • 38
  • 51
Rakesh Bagaria
  • 27
  • 5
  • Is this answer to your question? [Click here!!](https://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element) – Mayur Fartade Apr 18 '20 at 08:48

2 Answers2

1

You need to use absolute position to place the search icon inside the search box. Check the working snippet below

body {
  padding: 32px;
}

.has-search {
  position: relative;
}

.has-search .form-control {
  padding-right: 2.375rem;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
  right: 0;
  top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<div class="form-group has-search">
  <input type="text" class="form-control" placeholder="Search">
  <span class="fa fa-search form-control-feedback"></span>
</div>
SpiritOfDragon
  • 1,404
  • 2
  • 15
  • 27
0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 
<div class="col-sm-3 p-0 m-0" id="search-bar">
    <div class="input-group input-group-sm m-0 p-1 border d-flex justify-content-between">
      <input type="search" class="form-control-sm pl-0 w-75 h-100 m-0 align-items-center border-0" id="search-item"
        placeholder="  search.." style="height:16px;width:30%;border-radius:10px">
      <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
    </div>
</div>
Emir Vatric
  • 11
  • 3
  • While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. – Maximouse Apr 18 '20 at 11:26