HTML: Campo search con icona lente centrata

Vediamo come fare per abbellire il campo di ricerca di oscommerce standard.



Ho deciso di utilizzare bootstrap, per quanto riguarda lo style.
Probabilmente non e' il modo migliore di farlo, in quanto ho messo dello style in line per far presto.
Comunque funziona.

<div id="searchbox" style="float: right; margin-top:-62px; margin-right: 8px;">
<form name="search" action="http://<shop_url>/advanced_search_result.php" method="get" class="widget-searchbar-form">
<div class="input-group">
<input type="hidden" name="search_in_description" value="1">
<input type="text" class="form-control gi-search-input" style="height:28px;width:200px;float: right;" name="keywords" size="10" maxlength="100" placeholder="ein Produkt suchen..." required="">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>

nell' head va aggiunto il file <link href=css/bootstrap.min.css rel=stylesheet>

creato su bootstrap e i relativi font-files

fonts/glyphicons-halflings-regular.eot

svg, ttf, woff, woff2

nel css va aggiunto:

bootstrap.css
bootstrap.min.css
bootstrap-theme.min.css

anche se io ho linkato solo il min