This is how to make a Bootstrap glyphicon so that it appears inside a form-control input. This works well for the navbar search form.
CSS :
.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);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
box-shadow:none;
-webkit-box-shadow:none;
border-color:#cccccc;
}
HTML :
Result :
