将Twitter Bootstrap图标添加到输入框 [英] Add Twitter Bootstrap icon to Input box

问题描述

我们如何在文本输入元素的右侧添加一个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; 
} 
  

解决方案

/ h3>

您可以使用

How can we add a Twitter Bootstrap icon icon-search to the right of a text input element?

The following attempt placed all the icons inside the input element, how can we crop it so it only displays the icon for icon-search?

Current Attempt

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

解决方案

Updated Bootstrap 3.x

You can use the .input-group class like this:

<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

You can use the .input-append class like this:

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

Working Demo in jsFiddle for 2.x

---

Both will look like this:

If you'd like the icon inside the input box, like this:

Then see my answer to Add a Bootstrap Glyphicon to Input Box

这篇关于将Twitter Bootstrap图标添加到输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！