当前位置：theitroad>Html 将 Twitter Bootstrap 图标添加到输入框

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/16875392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 08:59:32 　来源:igfitidea点击:

Add Twitter Bootstrap icon to Input box

htmlcsstwitter-bootstrap

提问by Nyxynyx

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

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

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?

以下尝试将所有图标放置在 input 元素内，我们如何裁剪它以便只显示 的图标icon-search？

Current Attempt

当前尝试

enter image description here

在此处输入图片说明

CSS

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

回答by KyleMit

Updated Bootstrap 3.x

更新的引导程序 3.x

You can use the .input-groupclass like this:

你可以.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

在 jsFiddle for 3.x 中的工作演示

Bootstrap 2.x

引导程序 2.x

You can use the .input-appendclass like this:

你可以.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

在 jsFiddle for 2.x 中的工作演示

Both will look like this:

两者都将如下所示：

screenshot outside

外面的截图

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

如果您想图标内的输入框，如下所示：

screenshot inside

里面的截图

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

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

回答by HDP

Bootstrap 4.x with 3 different way.

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

  1. Icon with default bootstrap StyleIcon with default bootstrap Style

    <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. Icon Inside Input with default bootstrap classIcon Inside Input with default bootstrap class

    <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. Icon Inside Input with small custom cssIcon Inside Input with small custom 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>

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

  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 的内部输入图标带有小型自定义 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>

回答by Femi

Since the glyphicons image is a sprite, you really can't do that: fundamentally what you want is to limit the size of the background, but there's no way to specify how big the background is. Either you cut out the icon you want, size it down and use it, or use something like the input field prepend/append option (http://twitter.github.io/bootstrap/base-css.html#formsand then search for prepended inputs).

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

回答by alhelal

For bootstrap 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

演示

回答by tyler.frankenstein

Bootstrap 4.x

引导程序 4.x

With Bootstrap 4 (and Font Awesome), we still can use the input-groupwrapper around our form-controlelement, and now we can use an input-group-append(or input-group-prepend) wrapper with an input-group-textto get the job done:

使用 Bootstrap 4（和 Font Awesome），我们仍然可以input-group在我们的form-control元素周围使用包装器，现在我们可以使用带有 an 的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>

It will look something like this (thanks to KyleMitfor the screenshot):

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

enter image description here

在此处输入图片说明

Learn more by visiting the Input groupdocumentation.

通过访问输入组文档了解更多信息。

相关推荐

Html 在 div 中移动文本而不移动 div

Html 在 div 中移动文本而不移动 div

Html 单击时更改边框颜色

Html 单击时更改边框颜色

Html 如何使输入字段只读但仍将数据发送回表单？

Html 如何使输入字段只读但仍将数据发送回表单？

Html CSS 过渡：边框滑动而不是褪色

Html CSS 过渡：边框滑动而不是褪色

相关推荐
最近更新
标签