I have successfully incorporated datatables with bootstrap(thanks to datatable's excellent documentation!). I would now like to use bootstrap's glyphicons for the input search field . To do this, I need to place an icon with `<i class="icon-search"></i>`. Is there an easy way to achieve this?

things i have tried is :

```
$(document).ready(function() {
  $('#table').dataTable( {
    sDom: '<"icon-search"r><"H"lf>t<"F"ip>',
    oLanguage: {sSearch: ""},
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false } );
} );

```

but this places the icon as such not inside the input field.

I want to wrap the input field as :

```
<div class="control-group">
<label class="control-label" for="inputIcon">Search : </label>
  <div class="controls">
   <div class="input-prepend">
   <span class="add-on"><i class="icon-envelope"></i></span>
   <input class="span2" id="inputIcon" type="text">
  </div>
 </div>
</div>

```