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=" Your Name" />
<input id="email" type="text" class="field-icon" placeholder=" Email Address" />
<textarea id="message" type="text" class="field-icon" placeholder=" Comments"></textarea>
<input id="submit" type="submit" value="Submit" />
</form>
Check out the Pen:
Like "FontAwesome Icons and Input Placeholders"?
Feel free to get social and share with others. Thanks!
Keep in the Know
Subscribe to get notifications on my Ramblings, updates, and new releases.
I do not sell or share your information to any one for any reason at any time. I value your privacy and appreciate your trust in me.