Bootstrap navbar search icon

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&hellip;"><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.