Bootstrap navbar search icon - css

Question

The bootstrap examples for the navbar search form have just a text box.
I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap?
Here's what I've tried so far but it's failing:
http://jsfiddle.net/C4ZY3/3/

Answer 1

Here's how to use the :before pseudo selector and glyphicons for Bootstrap 2.3.2 instead of a background image on the input.
Here's a couple of simple examples: http://jsfiddle.net/qdGZy/
<style type="text/css">
input.search-query {
padding-left:26px;
}
form.form-search {
position: relative;
}
form.form-search:before {
content:'';
display: block;
width: 14px;
height: 14px;
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
background-position: -48px 0;
position: absolute;
top:8px;
left:8px;
opacity: .5;
z-index: 1000;
}
</style>
<form class="form-search form-inline">
<input type="text" class="search-query" placeholder="Search..." />
</form>
Update For Bootstrap 3.0.0
Here's an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/

Answer 2

One of the way to do it is to add left padding to the field and add background image for the field.
See example: http://jsfiddle.net/hYAEQ/
It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.
I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.
EDIT: The way to do it using bootstrap sprite and additional container for icon
http://jsfiddle.net/hYAEQ/2/
EDIT 2:
Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/
EDIT 3:
If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}

Answer 3

Play this fiddle, I put some rosin on the bow for you:
http://jsfiddle.net/pYRbm/
.fornav {
position:relative;
margin-left:-22px;
top:-3px;
z-index:2;
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>

Answer 4

You can also not touch the css at all by using prepending form inputs like so
<form class="navbar-search">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
</div>
</form>
Note that whitespace between </span> and <input> will create a gap between the icon and the text box.

Answer 5

In bootstrap 3.x.x
<div class="input-group">
<input type="text" class="form-control" id="search">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>

Answer 6

The new version 2.1.1 fixes the problem. It doesn't handle the case of the 15 pixel radius, so I went ahead and styled it accordingly. I also added navbar-inverse for fun.
A couple of caveats. The CSS can be better optimized, but recently I've been spoiled by less. Finally, there's an ever so slight, barely visible, left border to the left of the magnifying glass. I don't know exactly what's causing it, but it is likely the box shadow.
Please feel free to fork and improve.
http://jsfiddle.net/joelrodgers/hYAEQ/333/

Answer 7

For those using Rails, my solution is not the most beautiful but works.
<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
<%= text_field_tag :search, params[:search], :class => "search-query",
:style => "padding-left:29px" %>
<div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>

Answer 8

Bit late to the party on this one ...
I used the following to achieve the search input as an icon
<div class="input-append">
<input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>

Answer 9

You should change your approach. Use span.search-query as an overlay - here you have the most important things:
.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */