Użyj ikony Font Awesome w symbolu zastępczym

Jeśli używasz FontAwesome 4.7 to powinno wystarczyć:

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

Listę kodów szesnastkowych można znaleźć w Font Awesome cheatsheet . Jednak w ostatnim FontAwesome 5.0 ta metoda nie działa (nawet jeśli używasz podejścia CSS połączonego ze zaktualizowaną font-family).

Rozwiązałem tą metodą:

W CSS użyłem tego kodu dla fontAwesome class :

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

W kodzie HTML dodałem FontAwesome class oraz fontawesome icon code wewnątrz elementu zastępczego:

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

Możesz zobaczyć w CodePen.

Tam, gdzie jest obsługiwana, można użyć pseudoselektora ::input-placeholder w połączeniu z ::before.

Zobacz przykład na stronie:

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

Właśnie nad tym pracowałem i natknąłem się na ten artykuł, z którego zmodyfikowałem to:

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

Używam Ember (Wersja 1.7.1) i musiałem zarówno powiązać wartość wejściową, jak i mieć symbol zastępczy, który był ikoną FontAwesome. Jedynym sposobem wiązania wartości w Ember (o którym wiem) jest użycie wbudowanego helpera. Ale to powoduje, że Element Zastępczy jest unikalny, "" pojawia się właśnie tak, tekst.

Jeśli używasz Embera lub nie, musisz ustawić CSS elementu zastępczego wejścia, aby miał rodzinę czcionek FontAwesome. To jest SCSS (using Bourbon for the stylizacja zastępcza):

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

Jeśli używasz tylko kierownicy, jak wspomniano wcześniej, możesz po prostu ustawić encję html jako symbol zastępczy:

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

Jeśli używasz Ember, powiązaj symbol zastępczy z właściwością kontrolera, która ma wartość unicode.

W szablonie:

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

Na kontrolerze:

listFilter: null,
listFilterPlaceholder: "\uf002"

A Wiązanie wartości działa dobrze!

Robię to dodając fa-placeholder klasę do tekstu wejściowego:

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

Więc w css po prostu dodaj to:

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

Aktualizacja:

Aby zmienić czcionkę podczas wpisywania tekstu przez użytkownika, wystarczy dodać czcionkę po font awesome

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

Użyj placeholder="" w swoim wejściu. Możesz znaleźć unicode w FontAwesome page http://fontawesome.io/icons /. Ale musisz upewnić się, że dodasz style="font-family: FontAwesome;" do swojego wejścia.

Ktoś zastanawia się nad Font Awesome 5 implementacja:

Nie określaj ogólnej rodziny czcionek "Font Awesome 5", musisz konkretnie zakończyć z gałęzią ikon, z którymi pracujesz. Tutaj używam na przykład gałęzi "marki".

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

Więcej Szczegółów Użyj ikony Font Awesome (5) w tekście zastępczym

Jest małe opóźnienie i jank, ponieważ czcionka zmienia się w odpowiedzi udzielonej przez Jasona. Użycie zdarzenia" change "zamiast" keyup " rozwiązuje ten problem.

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

Ignorowanie jQuery można to zrobić używając ::placeholder elementu wejściowego.

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

Część css

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

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

THE BEST PART: Możesz mieć inną rodzinę czcionek dla elementu zastępczego i tekstu

Dodałem zarówno tekst, jak i ikonę w zastępstwie.

placeholder="Edit   "

CSS:

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