Bootstrap导航栏搜索图标

Question

导航栏搜索表单的引导示例只有一个文本框.

我希望能够在开头添加搜索图标,就像Twitter在搜索框中所做的那样.我怎么能用bootstrap做到这一点？

这是我到目前为止所尝试的但它失败了:http: //jsfiddle.net/C4ZY3/3/

Answer 1

以下是如何使用Bootstrap 2.3.2的:before伪选择器和glyphicons 而不是输入上的背景图像.

这里有几个简单的例子: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>

更新Bootstrap 3.0.0

这是bootstrap 3.0的更新小提琴:http://jsfiddle.net/66Ynx/

Answer 2

其中一种方法是向场添加左边距并为场添加背景图像.

参见示例:http://jsfiddle.net/hYAEQ/

这不是twitter.com这样做的绝对方式,他们在搜索字段上方使用绝对位置元素,因为它们在单个精灵中有所有图像,并且不能轻易地将它们用作背景,但它应该这样做.

我使用内联图像作为背景,以便更容易将其发布到jsfiddle,但可以在这里使用普通的图像链接.

编辑:使用bootstrap精灵和图标http://jsfiddle.net/hYAEQ/2/的额外容器的方式

编辑2:

修复白色引导主题:http://jsfiddle.net/hYAEQ/273/

编辑3:

如果你使用navbar-inverse(黑色导航栏),你会想要这个小调整:http://jsfiddle.net/hYAEQ/410/

.navbar-search .search-query {
    padding-left: 29px !important;
}

Answer 3

玩这个小提琴,我在你的弓上放了一些松香: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>