font awesome icon input group inside field - forms

Question

I cannot get this icon to sit inside the field, I can only get it either above or below:
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
.form-group i{
color: #ccc;
float: right;
margin-right: 6px;
position: relative;
z-index: 2;
}
I have tried reading nearly every post on here but I am getting quite frustrated.

Answer 1

I think what you were looking for was the class "input-group-prepend" This is from v 4.0.0 I don't know how it was done in previous versions. I think with the addon class like mentioned in previous answers, but this is what works for me:
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
Here is a full form demonstration with 3 input fields:
<form>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-pencil"></i></span>
</div>
<textarea class="form-control" placeholder="Message" rows="5"></textarea>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-outline-info btn-block btn-lg">
</form>
... and the final result is:

Answer 2

You can use input-group-addon class like this:
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon">
<input type="text" class="form-control" id="inputFirstName">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
CODEPEN

Answer 3

Your code is good, Bootstrap 4 does not expose this feature but it actually has class inside. All you need to do is just add the class "input-group-text" next to "input-group addon".
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group">
<div class="input-group addon input-group-text">
<i class="fa fa-user">
</i>
<input type="text" class="form-control" id="inputFirstName">
</div>
</div>
</div>

Answer 4

Maybe this will help you.
<div class="form-group">
<label for="inputFirstName">First Name</label>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" type="text" id="inputFirstName">
</div>
</div>

Answer 5

Try putting the css link of font-awesome before the bootstrap link.