Bootstrap 4 Font-awesome Input Icons

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 lik

Solution 1:

you can set the position:absulote to .fa then add position:relative to .form-control

formi.fa {
    position: absolute;
    top: 6px;
    left: 20px;
    color: blue;
    font-size: 22px;
    z-index: 9999;
}

.form-control {
    position: relative;
   padding-left: 45px!important;

}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd"crossorigin="anonymous"><scriptsrc="https://use.fontawesome.com/f4737361cc.js"></script><formclass=""method="POST"action=""><divclass="row"><divclass="col-md-12"><divclass="form-group"><iclass="fa fa-user-o"></i><inputid="email"type="email"class="form-control custom-input"name="email"value=""placeholder="Email adress"requiredautofocusstyle="border-radius: 30px;"></div></div></div><divclass="row"><divclass="col-md-12"><divclass="form-group {{ $errors->has('password') ? ' has-error' : '' }}"><iclass="fa fa-lock"></i><inputid="password"type="password"class="form-control custom-input"name="password"placeholder="Wachtwoord"requiredstyle="border-radius: 30px;"></div></div></div></form>