Add Twitter Bootstrap icon to Input box

Question

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; } 

Answer 1

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