FontAwesome Icons and Input Placeholders

I love it when a form I am filling out has little icons to help me know exactly what type of information the input is asking for. So I went looking to see what I could find.

All it really takes is adding the font-family of "FontAwesome" to the input's class:

.field-icon { font-family: 'Muli', FontAwesome, sans-serif; }

And then using the Font Awesome's icon Unicode (ie. ) in the placeholder text:

<form>
 <input id="name" type="text" class="field-icon" placeholder="&#xf007; &nbsp; Your Name" />
 <input id="email" type="text" class="field-icon" placeholder="&#xf0e0; &nbsp; Email Address" />
 <textarea id="message" type="text" class="field-icon" placeholder="&#xf075; &nbsp; Comments"></textarea>
 <input id="submit" type="submit" value="Submit" />
</form>

Check out the Pen: