Como agregar un icono en un html select options

Para agregar un icono fontawesome en un html select vamos a seguir los siguientes pasos:

Vincular fontawesome a nuesta pagina web

Aunque este paso podria parecer algo obvio, no esta demas indicarlo. Vamos a incluir la hoja de estilos de fontawesome al header de nuestro pagina.

<link rel='stylesheet' type='text/css' media='screen' href='fontawesome-free/css/all.min.css'>

Agregar la clase de fontawesome

Debemos agregar la clase fa tanto al select como a los options. Esto nos permitira tener acceso a la fuente de FontAwesome

<select class="form-control fa">
      <option class="fa"> Email </option>
      <option class="fa"> Camara </option>
      <option class="fa"> Direccion </option>
</select>

Agregamos el codigo UNICODE del icono

Ahora debemos ir a la pagina de Fontawesome y buscar el codigo UNICODE de los iconos que deseamos copiar.

En este caso, el codigo UNICODE es f2bb

Ahora agregamos el codigo en el texto del option, agregando  los caracteres &#x adelante del codigo y terminandolo con un ;.

<select class="form-control fa">
      <option class="fa"> &#xf0e0; Email </option>
      <option class="fa"> &#xf083; Camara </option>
      <option class="fa"> &#xf2bb; Direccion </option>
</select>

Espero que te sirva, si necesitas ayuda o quieres mejorar el resultado no dudes en contactarme.