将Twitter Bootstrap图标添加到"输入"框

Question

我们如何icon-search在文本输入元素的右侧添加Twitter Bootstrap图标？

以下尝试将所有图标放在input元素中,我们如何裁剪它以便它只显示图标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;
}

Answer 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工作演示

两者都看起来像这样:

如果您想图标内的输入框,如下所示:

然后看我的回答添加一个Bootstrap Glyphicon到输入框

Answer 2

Bootstrap 4.x有3种不同的方式。

1. 具有默认引导样式的图标

   <div class="input-group">
         <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
         <div class="input-group-append">
           <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
         </div>
       </div>
   

2. 具有默认引导程序类的图标内部输入

   <div class="input-group">
         <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
         <div class="input-group-append">
           <span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
         </div>
   
   </div>
   

3. 带有小自定义CSS的输入图标内部

   <div class="input-group">
         <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
           <span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
       </div> 
   

   自定义CSS

   .icon-inside {
         position: absolute;
         right: 10px;
         top: calc(50% - 12px);
         pointer-events: none;
         font-size: 16px;
         font-size: 1.125rem;
         color: #c4c3c3;
         z-index:3;
       }
   

<div class="input-group">
      <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
      </div>
    </div>

<div class="input-group">
      <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
      <div class="input-group-append">
        <span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
      </div>

</div>