title: Search bar using Bootstrap and Font Awesome icon font
body: <p>I'm trying to add a search icon inside the input box but the icon is currently displayed outside the input.</p>
  
  <p>Any suggestion?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" &gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"&gt;
  
  &lt;div class="col-sm-3 p-0 m-0" id="search-bar"&gt;
    &lt;div class="input-group input-group-sm m-0 p-1"&gt;
      &lt;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"&gt;
      &lt;a href="#"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>