title: Search input with an icon Bootstrap
body: <p>No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon? </p>
  
  <p>This is my code so far:</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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  
  &lt;div class="form-group col-md-4"&gt;
    &lt;input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input"&gt;
  &lt;/div&gt;
  &lt;!-- /.form-group --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to use this <a href="http://fontawesome.io/icon/search/" rel="noreferrer">font-awesome icon</a>. And I've tried adding it as a <code>background-image</code> too, as in:</p>
  
  <pre><code>.form-control {
    background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
    background-position: right center 5px;
  }
  </code></pre>
  
  <p>But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!</p>