<!DOCTYPE html>
<html>

<head>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">

    <div class="inner-addon left-addon">
      <i class="glyphicon glyphicon-user"></i>      
      <input type="text" class="form-control" placeholder="Username" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-search"></i>
      <input type="text" class="form-control" placeholder="Search" />
    </div>

    <br>
    <br>

    <div class="row">

      <div class="form-group col-xs-6">
        <label class="control-label">
          <code>.inner-addon.<i>left</i>-addon</code>
        </label>
        <div class="inner-addon left-addon">
          <i class="glyphicon glyphicon-user"></i>
          <input type="text" class="form-control" placeholder="Username" />
        </div>
      </div>

      <div class="form-group col-xs-6">
        <label class="control-label">
          <code>.inner-addon.<i>right</i>-addon</code>
        </label>
        <div class="inner-addon right-addon">
          <i class="glyphicon glyphicon-search"></i>
          <input type="text" class="form-control" placeholder="Search" />
        </div>
      </div>
    </div>

  </div>

  </div>
</body>

</html>
/* enable absolute positioning */
.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }



body {
  margin: 10px;
}
## Add Glyphicon to Input Box


Related to this SO Question:
http://stackoverflow.com/a/18839305/1366033