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

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

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

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:

• Fügen Sie dem Eingabefeld das Twitter Bootstrap-Symbol hinzu
• Platzieren Sie das Suchsymbol in der Nähe des Textfeld-Bootstraps

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

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

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

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

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:

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

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

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

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.

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

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

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

Ergebnis

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

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:

Sie können den Unicode-HTML-Code verwenden

Um ein Benutzersymbol hinzuzufügen , 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.

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:

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>

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

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