Bootstrap Glyphicon zum Eingabefeld hinzufügen

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 nur mit dem voreingestellten bootstrap CSS v3.3.1 gemacht:

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

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 benutzerdefinierte CSS erfolgen.

verwenden Sie input-group-addon vor dem Eingabe-Tag, innerhalb von input-group, und verwenden Sie dann eines der Glyphicons. 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 custom.css-Datei ein paar Zeilen custuom css hinzu (passen Sie den Abstand an, falls erforderlich).

.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-addon transparent machen und den linken Verlauf des Eingabe-Tags auf Null einstellen, wird die Eingabe nahtlos angezeigt. Hier ist die benutzerdefinierte Ausgabe

Hier ist ein jsbin Beispiel

Dadurch werden die benutzerdefinierten CSS-Probleme behoben, die durch Überlappung mit Beschriftungen, Ausrichtung bei Verwendung von input-lg und Fokussierung auf Tabulatorprobleme entstehen.

Hier ist eine Nicht-Bootstrap-Lösung, mit der Sie Ihr Markup einfach halten können, indem Sie die Bilddarstellung des Glyphicons mithilfe der Base64-URI-Codierung direkt in das CSS einbetten.

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 Unicode-Liste finden Sie in Die vollständige Symbolreferenz für Font Awesome 4.6.

Hier ist eine andere Möglichkeit, dies zu tun, indem Sie das Glyphikon mit dem Pseudoelement :before in CSS 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 kompatible Webkit-basierte Browser )

_.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 _pointer-events: none;_ hinzufügen, damit der Cursor den Eingabefokus nicht beeinträchtigt. Alle anderen CSS-Regeln dienen zum Zentrieren und Hinzufügen des richtigen Abstands.

Das Ergebnis:

Sie können den Unicode-HTML-Code verwenden

Fügen Sie zum Hinzufügen eines Benutzersymbols einfach  zum Attribut placeholder hinzu, oder wo immer Sie möchten.

Vielleicht möchten Sie dieses Spickzettel .

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 one zu setzen: font-family: 'Glyphicons Halflings', Arial, wobei Arial die Schriftart von ist regulärer Text in der Eingabe.

Getestet mit Bootstrap 4.

Nehmen Sie einen form-control und fügen Sie seiner Klasse is-valid hinzu. Beachten Sie, wie das Steuerelement grün wird. Beachten Sie jedoch vor allem das Häkchensymbol rechts neben dem Steuerelement. 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>

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:

Sie sollten in der Lage sein, dies mit vorhandenen Klassen bootstrap und einem kleinen benutzerdefinierten Stil zu tun.

<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 Klasse icon-user referenziert. Diese Antwort wurde zum Zeitpunkt von Bootstrap Version 2 geschrieben. Den Verweis finden Sie auf der folgenden Seite: http://getbootstrap.com/2.3.2/base-css.html# Bilder

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 angepasst werden, sodass Sie mehr Abstand für die Eingabe [Typ = Nummer] zulassen können, 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=11