Fonte Fonte de ícone impressionante como espaço reservado na entrada após adicionar classe com jquery

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.