title: Bootstrap 4 Font-awesome input icons
body: <p>I'm trying to figure out how to add font-awesome icons to my input fields. I found a design that I really like and I need to fit icons in the input field. This is what it looks like: 
  <a href="https://i.stack.imgur.com/NECfO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NECfO.png" alt="enter image description here"></a></p>
  
  <p>But my form looks like this, And I can't really figure out how to add them in. I looked for numerous answers but none of them worked out for me as always I hope I can find the answer here.
  <a href="https://i.stack.imgur.com/hr0QT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hr0QT.png" alt="enter image description here"></a></p>
  
  <p>Anyhow, This is the code for the form.</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.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
  &lt;script src="https://use.fontawesome.com/f4737361cc.js"&gt;&lt;/script&gt;
  
  &lt;form class="" method="POST" action=""&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="form-group"&gt;
          &lt;i class="fa fa-user-o"&gt;&lt;/i&gt;
          &lt;input id="email" type="email" class="form-control custom-input" name="email" value="" placeholder="Email adress" required autofocus style="border-radius: 30px;"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="form-group{{ $errors-&gt;has('password') ? ' has-error' : '' }}"&gt;
      
           &lt;i class="fa fa-lock"&gt;&lt;/i&gt;                        
          &lt;input id="password" type="password" class="form-control custom-input" name="password" placeholder="Wachtwoord" required style="border-radius: 30px;"&gt;
       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
   
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance</p>