<span class="form-search"></span> <input class="search-query form-control" style="width: 200px" placeholder="Live search"/>
And CSS:
span.form-search { position: relative; } span.form-search:before { display: block; width: 14px; height: 14px; content: "\e003"; font-family: 'Glyphicons Halflings'; background-position: -48px 0; position: absolute; top:8px; left:8px; opacity: .5; z-index: 1000; } input.search-query { padding-left:26px; }
Live code: https://jsfiddle.net/L1pb9km3/
The above display perfectly ok with Chrome, but not on Firefox.
Chrome:
Firefox:
The work-around to make it work on Firefox is simple, just add a float: left to the span.form-search
span.form-search { position: relative; float: left; }
Live code: https://jsfiddle.net/axjk3xss/
Yes it's easy to land on comet than to properly align stuff on web using CSS.