Я пытаюсь использовать потрясающие шрифты иконки в качестве заполнителя в поле ввода поиска.

Примеры Jsfiddle

Я использую соответствующую HTML-сущность в качестве заполнителя, затем использую псевдокласс для стилизации заполнителя с правильным семейством шрифтов (пример 2 в 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';
}

Работает как положено.

Проблема начинается, когда я пытаюсь добавить входной класс и заполнитель через jquery (пример 1 в jsfiddle):

JS:

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

Он не применяет семейство шрифтов для ввода заполнителя, а просто показывает текст сущности.

Я попытался смешать вещи вокруг и наконец сдался. Пожалуйста помоги!

Примеры Jsfiddle

П.С .: Путь добавления:before со шрифтомcontent для ввода оболочки в CSS не будет работать для моего конкретного случая.