Bootstrap Tutorial - Put Glyphicon Inside Input Box

The following code shows how to put Glyphicon Inside Input Box.
Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
.left-inner-addon {<!--  ww w  . j  av  a 2  s .c o m-->
  position: relative;
}

.left-inner-addon input {
  padding-left: 30px;
}

.left-inner-addon i {
  position: absolute;
  padding: 10px 12px;
}

.right-inner-addon {
  position: relative;
}

.right-inner-addon input {
  padding-right: 30px;
}

.right-inner-addon i {
  position: absolute;
  right: 0px;
  padding: 10px 12px;
}
</style>
</head>
<body>
  <p>Full Size:</p>
  <div class="left-inner-addon ">
    <i class="icon-user"></i> <input type="text" class="form-control"
      placeholder="Username" />
  </div>
  <div class="right-inner-addon ">
    <i class="icon-remove"></i> <input type="search" class="form-control"
      placeholder="Search" />
  </div>
  <br />
  <p>Smaller:</p>
  <div class="col-xs-6">
    <div class="left-inner-addon">
      <i class="icon-user"></i> <input type="text" class="form-control"
        placeholder="Username" />
    </div>
  </div>
  <div class="col-xs-6">
    <div class="right-inner-addon">
      <i class="icon-search"></i> <input type="search" class="form-control"
        placeholder="Search" />
    </div>
  </div>
  <!-- Post Info -->
  <div
    style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
    About this SO Question: <a
      href=' http://stackoverflow.com/q/18838964/1366033'>Add Bootstrap
      Glyphicon to Input Box</a><br /> Find documentation: <a
      href='http://getbootstrap.com/components/#input-groups'>Bootstrap
      3.0 Input Groups</a><br /> Fork This Skeleton Here <a
      href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br />
    External JS File: <a
      href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.js</a><br />
    External Style Sheet: <a
      href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.css</a><br />
    External Fonts / Icons: <a
      href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>font-awesome.min.css</a>
    <div>
</body>
</html>
Click to view the demo