Verwenden Sie Font Awesome Icon im Platzhalter

Ist es möglich, Font Awesome Icon in einem Platzhalter zu verwenden? Ich habe gelesen, wo HTML in einem Platzhalter nicht erlaubt ist. Gibt es eine Problemumgehung?

placeholder="<i class='icon-search'></i>"

Sie können kein Symbol und keinen Text hinzufügen, da Sie einem Teil eines Platzhalters keine andere Schriftart zuweisen können. Wenn Sie jedoch nur mit einem Symbol zufrieden sind, kann dies funktionieren. Die FontAwesome-Symbole sind nur Zeichen mit einer benutzerdefinierten Schriftart (Sie können im FontAwesome-Cheatsheet nach dem maskierten Unicode-Zeichen in der contentRegel suchen . In dem weniger Quellcode, der in Variablen gefunden wird. Die Herausforderung besteht darin, die Schriftarten bei der Eingabe auszutauschen nicht leer. Kombinieren sie es mit jQuery wie diese .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

Mit diesem CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Und diese (einfache) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Der Übergang zwischen Schriftarten ist jedoch nicht reibungslos.

Wenn Sie FontAwesome 4.7dies verwenden, sollte dies ausreichen:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

Eine Liste der Hex-Codes finden Sie im Font Awesome Cheatsheet . In der neuesten Version von FontAwesome 5.0 funktioniert diese Methode jedoch nicht (selbst wenn Sie den CSS-Ansatz in Kombination mit dem aktualisierten verwenden font-family).

Ich habe mit dieser Methode gelöst:

Im CSS habe ich diesen Code für die fontAwesome-Klasse verwendet :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

Im HTML habe ich die fontawesome-Klasse und den fontawesome-Symbolcode in den Platzhalter eingefügt :

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Sie können in CodePen sehen .

Die Antwort von @ Elli kann in FontAwesome 5 funktionieren, erfordert jedoch die Verwendung des richtigen Schriftnamens und des spezifischen CSS für die gewünschte Version. Wenn ich beispielsweise FA5 Free verwende, kann ich es nicht zum Laufen bringen, wenn ich all.css einbinde, aber es funktioniert einwandfrei, wenn ich solid.css einbinde:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

Für FA5 Pro lautet der Schriftname "Font Awesome 5 Pro".

Wo unterstützt, können Sie den ::input-placeholderPseudoselector in Kombination mit verwenden ::before.

Ein Beispiel finden Sie unter:

http://codepen.io/JonFabritius/pen/nHeJg

Ich habe gerade daran gearbeitet und bin auf diesen Artikel gestoßen, von dem ich dieses Zeug modifiziert habe:

http://davidwalsh.name/html5-placeholder-css

Ich verwende Ember (Version 1.7.1) und musste sowohl den Wert der Eingabe binden als auch einen Platzhalter haben, der ein FontAwesome-Symbol war. Die einzige Möglichkeit, den Wert in Ember (den ich kenne) zu binden, besteht darin, den eingebauten Helfer zu verwenden. Dadurch wird der Platzhalter jedoch maskiert. "& # XF002" wird einfach so angezeigt, Text.

Wenn Sie Ember verwenden oder nicht, müssen Sie das CSS des Platzhalters der Eingabe so einstellen, dass eine Schriftfamilie von FontAwesome vorhanden ist. Dies ist SCSS (unter Verwendung von Bourbon für das Platzhalter-Styling ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Wenn Sie nur den Lenker verwenden, wie bereits erwähnt, können Sie einfach die HTML-Entität als Platzhalter festlegen:

<input id="listFilter" placeholder="&#xF002;" type="text">

Wenn Sie Ember verwenden, binden Sie den Platzhalter an eine Controller-Eigenschaft mit dem Unicode-Wert.

in der Vorlage:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

auf dem Controller:

listFilter: null,
listFilterPlaceholder: "\uf002"

Und die Wertebindung funktioniert gut!

Verwenden Sie placeholder=""in Ihrer Eingabe. Sie finden Unicode auf der FontAwesome-Seite http://fontawesome.io/icons/ . Sie müssen jedoch sicherstellen, dass Sie style="font-family: FontAwesome;"Ihre Eingabe hinzufügen .

Dazu füge ich fa-placeholderdem Eingabetext eine Klasse hinzu :

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

Also, in CSS fügen Sie einfach Folgendes hinzu:

.fa-placholder { font-family: "FontAwesome"; }

Es funktioniert gut für mich.

Aktualisieren:

Um die Schriftart zu ändern, während der Benutzer Ihre Texteingabe eingibt, fügen Sie einfach Ihre Schriftart nach der Schriftart awesome hinzu

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Wer sich über eine Implementierung von Font Awesome 5 wundert :

Geben Sie keine allgemeine Schriftfamilie "Font Awesome 5" an. Sie müssen speziell mit dem Zweig der Symbole enden, mit denen Sie arbeiten. Hier benutze ich zum Beispiel den Zweig "Brands".

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Weitere Details Verwenden Sie das Symbol Font Awesome (5) im eingegebenen Platzhaltertext

Wenn Sie die jQuery ignorieren, können Sie ::placeholderein Eingabeelement verwenden.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

Der CSS-Teil

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

DAS BESTE TEIL: Sie können unterschiedliche Schriftfamilien für Platzhalter und Text verwenden

Ich weiß, dass diese Frage sehr alt ist. Aber ich habe keine einfache Antwort gesehen, wie ich sie früher verwendet habe.

Sie müssen nur die fasKlasse zur Eingabe hinzufügen und in diesem Fall ein gültiges Hex&#xf002 für die Glyphe von Font-Awesome wie hier einfügen<input type="text" class="fas" placeholder="&#xf002" />

Den Unicode der einzelnen Glyphen finden Sie im offiziellen Web hier .

Dies ist ein einfaches Beispiel, für das Sie weder CSS noch Javascript benötigen.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Es gibt eine leichte Verzögerung und einen Ruck, da sich die Schriftart in der Antwort von Jason ändert. Die Verwendung des Ereignisses "change" anstelle von "keyup" behebt dieses Problem.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Ich habe sowohl Text als auch Symbol in einem Platzhalter zusammengefügt.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Wenn Sie Bootstrap verwenden können / möchten, wäre die Lösung Eingabegruppen:

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

Sieht ungefähr so ​​aus: Eingabe mit Textvoranstellung und Suchsymbol

Ich habe das Problem etwas anders gelöst und es funktioniert mit jedem FA-Symbol über HTML-Code. Anstelle all dieser Schwierigkeiten mit Platzhaltern lautet meine Lösung:

1. So platzieren Sie ein Symbol auf die übliche Weise

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Passen Sie dann den Text des Platzhalters an (er ist für alle persönlich, in meinem Fall befand sich ein Symbol direkt vor dem Text).

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Hier ist das Problem, dass sich ein Symbol über unserer Eingabe befindet und den Cursor zum Klicken blockiert, sodass wir eine weitere Zeile in unser CSS einfügen sollten

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Ein Symbol verschwindet jedoch nicht zusammen mit dem Platzhalter, sodass wir es reparieren müssen. Und dies ist auch die endgültige Version meiner Lösung:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

Es ist schwieriger als ich dachte, aber ich hoffe, ich habe jemandem dabei geholfen.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

Die Teocci- Lösung ist so einfach wie möglich. Sie müssen also kein CSS hinzufügen. Fügen Sie einfach class = "fas" für Font Awesome 5 hinzu, da dem Element die richtige CSS-Schriftdeklaration hinzugefügt wird.

Hier ist ein Beispiel für ein Suchfeld in der Bootstrap-Navigationsleiste, bei dem das Suchsymbol sowohl der Eingabegruppe als auch dem Platzhalter hinzugefügt wurde (aus Demonstrationsgründen würde natürlich niemand beide gleichzeitig verwenden). Bild: https://i.imgur.com/v4kQJ77.png "> Code:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Manchmal antworten vor allem nicht wachen, wenn Sie unten Trick verwenden können

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>