Estou tentando usar ícones impressionantes de fontes como espaço reservado no campo de entrada de pesquisa.

Exemplos de Jsfiddle

Eu uso a entidade html correspondente como um espaço reservado e, em seguida, uso a pseudo classe para estilizar o espaço reservado com a família de fontes correta (exemplo 2 no 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';
}

Funciona como esperado.

O problema começa quando tento adicionar a classe de entrada e o espaço reservado via jquery (exemplo 1 no jsfiddle):

JS:

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

Ele não aplica a família de fontes ao espaço reservado de entrada e apenas mostra o texto da entidade.

Tentei misturar as coisas e finalmente desistir. Por favor ajude!

Exemplos de Jsfiddle

P.S .: A rota de adicionar:before com fontecontent inserir wrapper em css não funcionará no meu caso específico.