title: Add Twitter Bootstrap icon to Input box
body: <p>How can we add a Twitter Bootstrap icon <code>icon-search</code> to the right of a text input element?</p>
  
  <p>The following attempt placed all the icons inside the input element, how can we crop it so it only displays the icon for <code>icon-search</code>?</p>
  
  <p><strong>Current Attempt</strong></p>
  
  <p><img src="https://i.stack.imgur.com/VeeRZ.png" alt="enter image description here"></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>