Usar iconos de Font Awesome como placeholder en un formulario

Si estás preparando un formulario para web, un detalle interesante es poder añadir un icono junto al texto que aparece por defecto en cada campo, el llamado placeholder.

Para poder hacerlo, debemos seguir los siguientes pasos:

1- Carga los estilos de Font Awesome: hay varias formas de hacerlo, ya sea descargando los estilos y subiendolos a tu web directamente, o llamándo a la librería directamente. (En la web de Font Awesome están explicadas las diferentes opciones)

2- Añade los estilos a los campos input y textarea, además del resto de estilos que quieras darle:

input, textarea { 
	font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

3- Añade como placeholder, el código unicode del icono que quieras mostrar, escapándolo como html.

Por ejemplo, para el icono User, el código es f007, y lo pondremos cómo:

<input type="text" name="Nombre" placeholder="&#xf007;  Nombre" />

De esta forma, se mostrará el icono y el texto «Nombre» en el campo y desaparecerá cuando el usuario escriba el contenido del campo.