it-swarm.com.de

Hinzufügen des Twitter-Bootstrap-Symbols zum Eingabefeld

Wie können wir ein Twitter-Bootstrap-Symbol icon-search rechts von einem Texteingabeelement hinzufügen?

Beim folgenden Versuch wurden alle Symbole in das Eingabeelement eingefügt. Wie können wir es beschneiden, sodass nur das Symbol für icon-search angezeigt wird?

Aktueller Versuch

enter image description here

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

Bootstrap 3.x wurde aktualisiert

Sie können die Klasse .input-group folgendermaßen verwenden:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Arbeitsdemo in jsFiddle für 3.x


Bootstrap 2.x

Sie können die Klasse .input-append folgendermaßen verwenden:

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

Arbeitsdemo in jsFiddle für 2.x


Beide werden so aussehen: 

screenshot outside

Wenn Sie möchten, dass das Symbol in im Eingabefeld angezeigt wird, wie folgt:

screenshot inside

Dann sehen Sie meine Antwort zu Hinzufügen eines Bootstrap-Glyphicons zum Eingabefeld

86
KyleMit

Bootstrap 4.x mit 3 verschiedenen Möglichkeiten.

  1. Symbol mit Standard-Bootstrap-Style Icon 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 Eingabe mit Standard-Bootstrap-Klasse Icon 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. Symbol innerhalb der Eingabe mit kleinen benutzerdefinierten css Icon 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> 
    

    Benutzerdefinierte 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>

3
HDP

Da das Glyphicons-Image ein Sprite ist, können Sie das wirklich nicht tun: Grundsätzlich möchten Sie die Größe des Hintergrunds begrenzen, aber Sie können nicht angeben, wie groß der Hintergrund ist. Entweder schneiden Sie das gewünschte Symbol aus, verkleinern es und verwenden es oder verwenden Sie die Eingabefeld-Option zum Anhängen/Anhängen ( http://Twitter.github.io/bootstrap/base-css.html#forms und dann nach vorangegangenen Eingaben suchen).

1
Femi

Bootstrap 4.x

Mit Bootstrap 4 (und Font Awesome) können wir weiterhin den input-group - Wrapper für unser form-control -Element verwenden. Jetzt können wir einen input-group-append (oder input-group-prepend) - Wrapper verwenden ein input-group-text um die Arbeit zu erledigen:

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

Es wird ungefähr so ​​aussehen (Dank an KyleMit für den Screenshot):

 enter image description here

Weitere Informationen finden Sie in der Input-Gruppe Dokumentation.

0

Für Bootstrap 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

0
alhelal