Bootstrap navbar search icon

by

Here’s how to use the :before pseudo selector and glyphicons for Bootstrap 2.3.2 instead of a background image on the input.

enter image description here

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

enter image description here

Here’s an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/

Leave a Comment