title: Search input with an icon Bootstrap 4 with rounded textbox
body: <p>I want rounded border search box with search icon.</p>
  
  <p>Below code works but if I class "rounded-pill" then icon separates from textbox.</p>
  
  <p>How can I make textbox round while icon also remains within.</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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4 mt-5"&gt;
        &lt;div class="input-group"&gt;
          &lt;input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"&gt;
          &lt;span class="input-group-append"&gt;
                      &lt;button class="btn btn-outline-secondary border-left-0 border" type="button"&gt;
                          &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4 mt-5"&gt;
        &lt;div class="input-group"&gt;
          &lt;input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input"&gt;
          &lt;span class="input-group-append"&gt;
                      &lt;button class="btn btn-outline-secondary border-left-0  border" type="button"&gt;
                          &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>