引导导航栏搜索图标 [英] Bootstrap navbar search icon

问题描述

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

The bootstrap examples for the navbar search form have just a text box.

我希望能够在开头添加一个搜索图标，例如Twitter在他们的搜索框。

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?

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

Here's what I've tried so far but it's failing: http://jsfiddle.net/C4ZY3/3/

推荐答案

查看示例： http://jsfiddle.net/hYAEQ/

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

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.

我使用内联图像背景，使它更容易发布到jsfiddle，但随时使用正常的链接到图像在这里。

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.

编辑：使用引导精灵和额外的容器for icon
http://jsfiddle.net/hYAEQ/2/

The way to do it using bootstrap sprite and additional container for icon http://jsfiddle.net/hYAEQ/2/

编辑2：

修正白色启动主题： http ：//jsfiddle.net/hYAEQ/273/

编辑3：

正在使用navbar-inverse（黑色navbar），您将需要此次调整： http://jsfiddle.net/hYAEQ/410/

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;
}

这篇关于引导导航栏搜索图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！