Put Glyphicon Inside Input Box
Description
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 {<!--from ww w.j av a 2 s . co 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>