Добавить значок Twitter-загрузки Twitter в поле ввода

Как мы можем добавить значок Bootstrap Twitter icon-search справа от элемента ввода текста?

Следующая попытка помещала все значки внутри элемента ввода, как мы можем обрезать его, чтобы он отображал только значок icon-search?

Текущая попытка

enter image description here

CSS

input.search-box {
    width: 180px;
    background: #333;
    background-image: url('/img/glyphicons-halflings-white.png');
    background-position: -48px 0;
    padding-left: 30px;
    margin-top: 45px;
    border: 0;
    float: right;
}

Ответы

Ответ 1

Обновлен Bootstrap 3.x

Вы можете использовать класс .input-group следующим образом:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Рабочая демонстрация в jsFiddle для 3.x

Bootstrap 2.x

Вы можете использовать класс .input-append следующим образом:

<div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        <i class="icon-search"></i>
    </button>
</div>

Рабочая демонстрация в jsFiddle для 2.x

Оба будут выглядеть так:

screenshot outside

Если вы хотите использовать значок внутри, введите следующее:

screenshot inside

Затем см. мой ответ на Добавить глифатинус Bootstrap в поле ввода

Ответ 2

Поскольку изображение глификонов является спрайтом, вы действительно не можете этого сделать: в основном вы хотите ограничить размер фона, но нет способа указать, насколько большой фон. Либо вы вырезаете нужный значок, его размер и используете, либо используйте что-то вроде параметра ввода/добавления (http://twitter.github.io/bootstrap/base-css.html#forms а затем выполните поиск добавленных входов).