Estoy tratando de usar iconos de fuente impresionante como marcador de posición en el campo de entrada de búsqueda.

Jsfiddle ejemplos

Uso la entidad html correspondiente como marcador de posición, luego uso pseudoclase para diseñar el marcador de posición con la familia de fuentes correcta (ejemplo 2 en 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 se esperaba.

El problema comienza cuando intento agregar una clase de entrada y un marcador de posición a través de jquery (ejemplo 1 en jsfiddle):

JS:

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

No aplica font-family al marcador de posición de entrada y solo muestra el texto de la entidad.

Traté de mezclar las cosas y finalmente rendirme. ¡Por favor ayuda!

Jsfiddle ejemplos

P.S .: La ruta de sumar:before con fuentecontent ingresar el contenedor en css no funcionará para mi caso particular.