Ich versuche, Symbole mit tollen Schriftarten als Platzhalter im Suchfeld zu verwenden.

Jsfiddle Beispiele

Ich verwende die entsprechende HTML-Entität als Platzhalter und benutze dann die Pseudoklasse, um den Platzhalter mit der richtigen Schriftfamilie zu formatieren (Beispiel 2 in jsfiddle):

HTML:

<div class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</div>

CSS:

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon {
    padding:5px;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}
input.icon::-moz-placeholder {
    font-family:'FontAwesome';
}
input.icon::-ms-input-placeholder {
    font-family:'FontAwesome';
}

Es funktioniert wie erwartet.

Das Problem beginnt, wenn ich versuche, Eingabeklasse und Platzhalter über jquery hinzuzufügen (Beispiel 1 in jsfiddle):

JS:

$(document).ready(function() {
$('.wrapper input:first').addClass('icon');
$('.wrapper input:first').attr("placeholder", "");
});

Es wendet keine Schriftfamilie auf Eingabe-Platzhalter an und zeigt stattdessen nur Entitätstext an.

Ich habe versucht, Dinge zu mischen und schließlich aufzugeben. Bitte helfen Sie!

Jsfiddle Beispiele

P.S .: Der Router zum Hinzufügen von:before mit Schriftcontent Wrapper in CSS einzugeben, funktioniert in meinem speziellen Fall nicht.