Search Input box with search icon attached ( HTML,CSS ,bootstrap )

Want to have search input box along with the bootstrap search icon attached to it for any webpage , blogger? Use the following code to get that.

HTML code to get the HTML input box and search icon

<form action="/search" class="navbar-form search-form" id="searchform" method="get" role="search">
<div class="add-on input-group">
<input class="search-field form-control" id="search" name="q" placeholder="Search this blog.." type="search" value="" />
    <br />
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
</div>
</form>

CSS Code

.add-on{
 width:230px;
 margin-top:10px;
}
.add-on .input-group-btn > .btn {
   border-left-width:0;left:2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 height:42px;
}