将 Twitter Bootstrap 图标添加到输入框答案

【问题标题】：Add Twitter Bootstrap icon to Input box将 Twitter Bootstrap 图标添加到输入框
【发布时间】：2013-05-28 08:15:07
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 5 有 3 种不同的方式。

带有默认引导样式的图标

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

默认引导类的输入内部图标

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

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

<div class="input-group">
   <input type="text" class="form-control rounded-end" 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;
            }

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

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <div class="container">
    <h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>
    <div class="input-group">
       <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
       <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
    </div>

    <h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>
    <div class="input-group">
       <input type="text" class="form-control border-end-0" placeholder="From" aria-label="from" aria-describedby="from">
       <span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
    </div>

    <h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>
    <div class="input-group">
       <input type="text" class="form-control rounded-end" placeholder="From" aria-label="from" aria-describedby="from">
       <span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
    </div>

    </div>

Bootstrap 4.x 有 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>

带有自定义小 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;
        }

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

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

    <div class="container">
    <h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>
    <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>

    <h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>
    <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>

    <h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>
    <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>

    </div>

【讨论】：

谢谢，我更喜欢第一个，因为它很简单，也因为密码管理器（自动填充覆盖了第二个中的图标）谢谢你提供的简单示例。

【解决方案2】：

引导程序 5

根据Bootstrap 5 docs

.input-group-append 和 .input-group-prepend。您现在可以添加按钮和 .input-group-text 作为输入组的直接子级。

例子：

<div class="input-group">
    <div class="input-group-text">File input</div>
    <input class="form-control" id="formFile" type="file" />
    <button class="btn border" type="button" style="background-color: #e9ecef;">
        <i class="fas fa-times"></i>
    </button>
</div>

【讨论】：

【解决方案3】：

引导 4.x

使用 Bootstrap 4（和 Font Awesome），我们仍然可以在 form-control 元素周围使用 input-group 包装器，现在我们可以使用 input-group-append（或 input-group-prepend）包装器与 input-group-text 完成工作：

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
  <div class="input-group-append">
    <span class="input-group-text" id="my-search"><i class="fas fa-filter"></i></span>
  </div>
</div>

它看起来像这样（感谢KyleMit 的屏幕截图）：

访问Input group 文档了解更多信息。

【讨论】：

【解决方案4】：

对于引导程序 4

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <form class="form-inline my-2 my-lg-0">
                        <div class="input-group">
                            <input class="form-control" type="search" placeholder="Search">
                            <div class="input-group-append">
                                <div class="input-group-text"><i class="fa fa-search"></i></div>
                            </div>
                        </div>
                    </form>

Demo

【讨论】：

【解决方案5】：

更新了 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

引导程序 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>

Working Demo in jsFiddle for 2.x

两者都将如下所示：

如果你想要图标在输入框内，像这样：

那就看我对Add a Bootstrap Glyphicon to Input Box的回复

【讨论】：

如果没有给出引导程序 4 的解决方案，如果是，则编辑问题。

【解决方案6】：

由于 glyphicons 图像是一个精灵，你真的不能这样做：基本上你想要限制背景的大小，但没有办法指定背景的大小。要么剪下你想要的图标，将其缩小并使用它，要么使用输入字段 prepend/append 选项（http://twitter.github.io/bootstrap/base-css.html#forms 然后搜索前置输入）。

【讨论】：