Using font awesome as icons to beautify Input boxes

Hello, Well first of all thanks to creator of font awesome who has developed such a wonderful font that we can use and get rid of those images that we used for past many many years to beautify our buttons, informational messages etc. Its HTML5 and CSS3 days now and all is starting to make sense now. Purpose of this post is to show you how we can use font awesome to beautify a HTML text field or a HTML number box or similar. Its not exactly a background image but our Font awesome icon will be placed on top of our input box so that it act as one. Ok so if you have no Idea what I am talking about you should check this out and comeback to finish reading this post OR just finish this post and then visit the link below :) http://fortawesome.github.com/Font-Awesome/ Alright so lets get started here First download fontawesome from the URL above. Font awesome is a font library with CSS wrapper that was first created for Twitter bootstrap (http://twitter.github.com/bootstrap/) and offers many advantages. Some of the advantages are highlighted below With one single font you get 220+ vector icons, that means it does not matter how big you want to make your font size the quality will not deteriorate.  Its absolutely FREE for commercial use. I would suggest you though to make generous donations because this type of stuff takes a while to build and what more satisfactory than supporting a good souls those are making their work freely available. CSS wrapper. i.e. you don't do anything with the font directly and use CSS to manipulate your icons. It comes with IE7 support (A stroke of a genius) and much more Alright lets jump into some depth now with some examples that I assume that you are not using twitter bootstrap at all. Here are the installation instructions Download and extract fontawesome somewhere on your harddrive Now Copy the Font directory into your project. Copy font-awesome.css into your project Open font-awesome.css and edit … [Read more...]