font awesome icon input group inside field

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