將 Twitter Bootstrap 圖標添加到「輸入」框

問題描述

我們如何在文本輸入元素的右側添加一個 Twitter Bootstrap 圖標 icon-search？

以下嘗試將所有圖標放在輸入元素中，我們如何裁剪它，以便僅顯示 icon-search 的圖標？

當前嘗試

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

最佳解決方案

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>

Working Demo in jsFiddle for 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>