Fügen Sie Bootstrap Glyphicon zum Eingabefeld hinzu

340

Wie kann ich einem Texteingabefeld ein Glyphikon hinzufügen? Zum Beispiel möchte ich 'icon-user' in einer Benutzernameneingabe haben, ungefähr so:

Geben Sie hier die Bildbeschreibung ein

doovers
quelle
5
Dies ist meine alternative Lösung (für 2014) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina
Spät zur Party, aber schau dir meine Antwort an, ich benutze nur Bootstrap, um diesen Effekt zu erzielen, und um Farbe und Rand zu ändern, benutze ich zwei Zeilen CSS. Es löst die anderen Probleme, die im Antwortbereich stackoverflow.com/a/40945821/2914407
Dheeraj

Antworten:

755

Ohne Bootstrap:

Wir werden gleich zu Bootstrap kommen, aber hier sind die grundlegenden CSS-Konzepte im Spiel, um dies selbst zu tun. Wie der Bart der Beute hervorhebt , können Sie dies mit CSS tun, indem Sie das Symbol absolut innerhalb des Eingabeelements positionieren. Fügen Sie dann auf beiden Seiten Polster hinzu, damit sich der Text nicht mit dem Symbol überschneidet.

Also für den folgenden HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Sie können das folgende CSS verwenden, um Glyphen nach links und rechts auszurichten:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

CSS-Screenshot

Hinweis : Dies setzt voraus, dass Sie Glyphicons verwenden , funktioniert aber genauso gut mit Font-Awesome .
Für FA, ersetzen Sie einfach .glyphiconmit.fa


Mit Bootstrap:

Wie Buffer hervorhebt , kann dies nativ in Bootstrap mithilfe von Validierungszuständen mit optionalen Symbolen erreicht werden . Dazu geben Sie dem .form-groupElement die Klasse von .has-feedbackund dem Symbol die Klasse von .form-control-feedback.

Das einfachste Beispiel wäre ungefähr so:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Vorteile :

  • Beinhaltet Unterstützung für verschiedene Formulartypen (Basic, Horizontal, Inline)
  • Beinhaltet Unterstützung für verschiedene Steuerelementgrößen (Standard, Klein, Groß)

Nachteile :

  • Keine Unterstützung für enthalten linke Ausrichtung Symbole

Um die Nachteile zu überwinden, habe ich diese Pull-Anfrage mit Änderungen zusammengestellt, um linksbündige Symbole zu unterstützen. Da es sich um eine relativ große Änderung handelt, wurde sie bis zu einer zukünftigen Version verschoben. Wenn Sie diese Funktionen heute benötigen , finden Sie hier eine einfache Implementierungsanleitung:

Fügen Sie einfach diese Formularänderungen in CSS ein (auch über ein verstecktes Stack-Snippet unten eingefügt). * WENIGER : Wenn Sie alternativ über weniger erstellen , sind hier die Formularänderungen in weniger

Dann müssen Sie nur noch die Klasse .has-feedback-leftin eine Gruppe mit der Klasse aufnehmen .has-feedback, um das Symbol nach links auszurichten.

Da es viele mögliche HTML-Konfigurationen für verschiedene Formulartypen, verschiedene Steuerelementgrößen, verschiedene Symbolsätze und verschiedene Beschriftungssichtbarkeiten gibt, habe ich eine Testseite erstellt, auf der der richtige HTML-Satz für jede Permutation zusammen mit einer Live-Demo angezeigt wird.

Hier ist eine Demo in Plunker

Feedback-Screenshot

Der Vorschlag von PS frizi zum Hinzufügen pointer-events: none;wurde dem Bootstrap hinzugefügt

Haben Sie nicht gefunden, wonach Sie gesucht haben ? Versuchen Sie diese ähnlichen Fragen:

Zusätzliches CSS für linksbündige Feedback-Symbole

KyleMit
quelle
Siehe meine Bearbeitung, ich habe den CSS-Selektor von focusInput expliziter gemacht, andernfalls wird er von .input-group-addon überschrieben.
Michel Müller
@ MichelMüller, ich bin mir nicht sicher, ob ich den Wert in deiner vorgeschlagenen Bearbeitung sehe. Die .focusedInputKlasse wird definiert , nach .input-group-addonso , wenn der Style Sheets Cascade nach unten, wobei die letzteren Arten Vorrang haben sollten. Können Sie das Szenario besser beschreiben, das zu diesem Problem geführt hat?
KyleMit
2
Ich schlage vor, "Zeigerereignisse: keine;" für Symbole, da sie standardmäßig die Fokussierung der Eingabe beeinträchtigen.
Frizi
1
@Leandro, das tut es sicher! . Es ist nur , weil FontAwesome eingeführten Änderungen in Version brechen 4. Wenn Sie aus aktualisieren möchten 3.x auf 4.x , müssen Sie ändern <i class="icon-user"></i>zu <i class="fa fa-user"></i>. Wenn Sie über das Aktualisieren externer Bibliotheken nachdenken, lesen Sie unbedingt die Versionshinweise und die neue Dokumentation, um festzustellen, ob Ihre App noch kompatibel ist oder aktualisiert werden muss.
KyleMit
1
@Leando, können Sie mehr über die neuen Namenskonventionen in FA 4.0 sowie eine vollständige Migrationsanleitung von 3.21 bis 4
KyleMit
62

Die offizielle Methode. Kein benutzerdefiniertes CSS erforderlich:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Diese Demo basiert auf einem Beispiel in Bootstrap-Dokumenten. Scrollen Sie hier nach unten zu "Mit optionalen Symbolen" http://getbootstrap.com/css/#forms-control-validation

Geben Sie hier die Bildbeschreibung ein

Benutzer
quelle
3
+1 - Auf jeden Fall schön, einen nativen Ansatz in Bootstrap zu haben. Dies funktioniert zwar nicht so heiß bei links ausgerichteten Symbolen, wie es die Frage erfordert, aber definitiv ein guter Ansatz.
KyleMit
1
Das Hinzufügen {left:0}zur Glyphicon-Klasse sollte auf die Ausrichtung nach links achten. jsfiddle.net/LS2Ek/30 . Ich mag Ihren Outline + Box-Shadow-Ansatz. Sieht ordentlich aus!
Benutzer
Das habe ich ursprünglich auch gedacht, aber Sie werden einen Großteil der CSS-Arbeit in verschiedenen Situationen neu erstellen. Wenn Sie ein Etikett hinzufügen, treten einige Probleme auf . left:0Identifiziert in einem Inline-Formular den Beginn der Eingabe nicht mehr. Außerdem müssen Sie links neben der Eingabe eine Auffüllung hinzufügen und diese rechts entfernen. Trotzdem eine sehr schöne und saubere Lösung. Ich denke, das Identifizieren der linken Seite der Eingabe ist der schwierige Teil, bei dem ein Wrapper mit position:relativenützlich ist.
KyleMit
Sie sollten diesen Patch zum Bootstrap hinzufügen. Es ist eine praktische und häufig verwendete Funktion.
Benutzer
43

Hier ist eine reine CSS-Alternative. Ich habe dies für ein Suchfeld eingerichtet, um einen ähnlichen Effekt wie Firefox (und hundert andere Apps) zu erzielen.

Hier ist eine Geige .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}
Bart von Prey
quelle
+1 tolle Lösung. Ich habe es in eine linke und rechte Utility-Klasse umgewandelt, aber definitiv den richtigen Ansatz
KyleMit
Ja, so einfach und einfach perfekt
PeMa
11

So habe ich es gemacht, indem ich nur das Standard-Bootstrap-CSS v3.3.1 verwendet habe:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Und so sieht es aus:

Geben Sie hier die Bildbeschreibung ein

Garry Englisch
quelle
8

Dieser 'Cheat' funktioniert mit dem Nebeneffekt, dass die Glyphicon-Klasse die Schriftart für das Eingabesteuerelement ändert.

Geige

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Wenn Sie den Nebeneffekt beseitigen möchten, können Sie die "Glyphicon" -Klasse entfernen und das folgende CSS hinzufügen (Es gibt möglicherweise eine bessere Möglichkeit, das Platzhalter-Pseudoelement zu formatieren, und ich habe es nur in Chrome getestet).

Geige

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Möglicherweise eine noch sauberere Lösung:

Geige

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
Greenbender
quelle
8

Dies kann mit Klassen aus der offiziellen Bootstrap 3.x-Version ohne benutzerdefiniertes CSS erfolgen.

Verwenden Sie input-group-addonvor dem Eingangs - Tag, innerhalb von input-groupdann eine der glyphicons verwenden, hier ist der Code

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Hier ist die Ausgabe

Geben Sie hier die Bildbeschreibung ein

Um es weiter anzupassen, fügen Sie Ihrer eigenen custom.css-Datei ein paar Zeilen benutzerdefiniertes CSS hinzu (passen Sie die Auffüllung bei Bedarf an).

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Wenn Sie den Hintergrund des input-group-addonEingabeträgers transparent machen und den linken Farbverlauf des Eingabe-Tags auf Null setzen, wird die Eingabe nahtlos angezeigt. Hier ist die angepasste Ausgabe

Geben Sie hier die Bildbeschreibung ein

Hier ist ein jsbin- Beispiel

Dies löst die benutzerdefinierten CSS-Probleme der Überlappung mit Beschriftungen, der Ausrichtung während der Verwendung input-lgund der Konzentration auf Registerkartenprobleme.

Dheeraj
quelle
6

Hier ist eine Nicht-Bootstrap-Lösung, die Ihr Markup einfach hält, indem die Bilddarstellung des Glyphikons mithilfe der base64-URI-Codierung direkt in das CSS eingebettet wird.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

McCainz
quelle
6

Wenn Sie Fontawesome verwenden , können Sie dies tun:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Ergebnis

Geben Sie hier die Bildbeschreibung ein

Die vollständige Liste der Unicodes finden Sie in der Symbolreferenz The complete Font Awesome 4.6.3

Merlin
quelle
5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

Engel Patel
quelle
tolles "jugad", aber das ist wirklich nützlich, um ein benutzerdefiniertes Symbol zu setzen. Danke.
Dhruv Raval
4

Hier ist eine andere Möglichkeit, indem Sie das Glyphikon mit dem platzieren :before in CSS zu platzieren.

Arbeitsdemo in jsFiddle

Für diesen HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Verwenden Sie dieses CSS ( Bootstrap 3.x- und Webkit-basierte Browser kompatibel )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Wie @Frizi sagte, müssen wir hinzufügen pointer-events: none; damit der Cursor den Eingabefokus nicht stört. Alle anderen CSS-Regeln dienen zum Zentrieren und Hinzufügen des richtigen Abstands.

Das Ergebnis:

Bildschirmfoto

Richard Cotrina
quelle
2

Sie können den Unicode-HTML-Code verwenden

Um ein Benutzersymbol hinzuzufügen &#xe008;, fügen Sie einfach das hinzuplaceholder Sie es Attribut hinzu oder wo immer Sie es möchten.

Vielleicht möchten Sie diesen Spickzettel überprüfen .

Beispiel:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Vergessen Sie nicht, die Schriftart der Eingabe mit dem folgenden Code auf Glyphicon einzustellen: font-family: 'Glyphicons Halflings', Arialwobei Arial die Schriftart des regulären Textes in der Eingabe ist.

Mona Lisa
quelle
1

Ich habe auch eine Entscheidung für diesen Fall mit Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Bei der Eingabe habe ich so etwas: Geben Sie hier die Bildbeschreibung ein

Vitalii Nesterenko
quelle
1

Getestet mit Bootstrap 4.

Nimm ein form-controlund füge is-valides seiner Klasse hinzu. Beachten Sie, wie das Steuerelement grün wird. Beachten Sie jedoch, dass das Häkchensymbol rechts neben dem Steuerelement angezeigt wird. Das wollen wir!

Beispiel:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Igor K.
quelle
0

Wenn Sie das Glück haben, nur moderne Browser zu benötigen, versuchen Sie es mit css transform translate. Dies erfordert keine Wrapper und kann so angepasst werden, dass Sie mehr Abstand für die Eingabe [Typ = Nummer] zulassen, um den Eingabespinner aufzunehmen, oder ihn links vom Griff verschieben können.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

httpete
quelle
0

Sie sollten dies mit vorhandenen Bootstrap-Klassen und einem kleinen benutzerdefinierten Stil tun können.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Bearbeiten Das Symbol wird über die icon-userKlasse referenziert . Diese Antwort wurde zum Zeitpunkt der Bootstrap-Version 2 geschrieben. Die Referenz finden Sie auf der folgenden Seite: http://getbootstrap.com/2.3.2/base-css.html#images

YOOOEE
quelle
Die Bootstrap-Glyphicon-Referenz in dieser Antwort nicht zu sehen
Kirby
@Kirby, das Symbol wird über die Symbolbenutzerklasse referenziert. Diese Antwort wurde zum Zeitpunkt der Bootstrap-Version 2 geschrieben. Sie können die Referenz auf der folgenden Seite sehen - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE