Add Twitter Bootstrap icon to Input box
css, html, twitter-bootstrap
Solution
Updated Bootstrap 3.x
You can use the `.input-group` class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Working Demo in jsFiddle for 3.x
Bootstrap 2.x
You can use the `.input-append` class like this:
<div class="input-append">
<input class="span2" type="text">
<button type="submit" class="btn">
<i class="icon-search"></i>
</button>
</div>
Working Demo in jsFiddle for 2.x
Both will look like this:
If you'd like the icon inside the input box, like this:
Then see my answer to Add a Bootstrap Glyphicon to Input Box
Problem
How can we add a Twitter Bootstrap icon `icon-search` to the right of a text input element? The following attempt placed all the icons inside the input element, how can we crop it so it only displays the icon for `icon-search`? Current Attempt CSS ``` input.search-box { width: 180px; background: #333; background-image: url('/img/glyphicons-halflings-white.png'); background-position: -48px 0; padding-left: 30px; margin-top: 45px; border: 0; float: right; } ```