<!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