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

  1. Download and extract fontawesome somewhere on your harddrive
  2. Now Copy the Font directory into your project.
  3. Copy font-awesome.css into your project
  4. Open font-awesome.css and edit the font url to ensure it points to the right place

Alright once the you are done with installing font-awesome, include it in your HTML page as

don’t forget to change the path to font-awesome.

 

 

Ok now let take a basic example markup as shown below

The Markup

The CSS

[geshi lang=”css” nums=”1″ target=”_self” ]

The Result

font awesome input box example

this approach just have one advantage that is visually recognisable. When you use any modern browser you will notice that it creates a different color border for the input box which has current focus. When we use default font-awesome technique then that border starts from where icon layer finishes. It just a marginal thing but I thought I should put up this technique there anyway.

you can adjust paddings and margins yourself.

Additional Tip for servicestack users

Just in case nothing shows up if you developing your .NET webservices using servicestack then make sure that you allow .eot, .svg, .woff, .ttf extensions to allowed extension collection.

Details here

http://jaspreetchahal.org/servicestack-adding-to-allowed-file-extensions/

 

Demo

http://jaspreetchahal.org/examples/font-awesome-example.html

You can try other examples from here

http://fortawesome.github.com/Font-Awesome/#examples

Once you realize how good this library is you will just hate to think why you were not using this before.

I hope that this post was helpful in some sort.

I will bring a couple of more examples that are not covered on official page soon.

Cheers,

Comments

  1. That’s not a background image…

  2. Clinton Gallagher says:

    Why am I not surprised this does not work for me?
    I made sure I unblocked the downloaded zip file and then followed each instruction to the letter and the icon font will not display: only a little rectangle with a border and what looks like some kind of symbol.

    // directories
    css /* changed path in font-awesome.css */
    font /* left as is */

    // link

    // css

    .icon-ph {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 16px;
    padding: 4px 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    background-color: #eeeeee;
    position:absolute;
    left:3px;
    top:3px;
    bottom:3px;
    z-index:3;
    }

    .custom-text {
    padding:6px 6px 6px 30px ;
    }

    .input-container {
    position:relative;
    }

    // html

    // FUBAR example
    metromilwaukee.com/webfiles/font-awesome.html

    • Hi Clinton,
      Is it possible that your rewrite rules are not allowing eot, woff, ttf and svg files to be processed as files literally. I did a quick test and while I tried to access a font file directly on your website, your server redirected me else where.
      So I am somewhat sure that this is a .htaccess issue.
      Cheers!

      • Clinton Gallagher says:

        // Files are hosted on a Windows 8 Server
        metromilwaukee.com/webfiles/font-awesome.html

        * IE7: all font-faces load except FontAwesome
        * IE8: all font-faces load except FontAwesome
        * IE9: all font-faces load except FontAwesome

        * Chrome: all font-faces load except LeagueGothicKit1
        * FireFox: all font-faces load except LeagueGothicKit1

        Apparently the @font-face CSS declarations are FUBAR nor does font-awesome-ie7.css do anything as is.

        Thank you for commenting Jas.
        Can you view source and make a recommendation?

        • Ok I can’t see anything wrong other than doctype is missing in your html file.
          What this means is that it is kicking off quirks mode of IE.
          I would recommend that you should try to add the line below at the start of your html document. Refresh your page and see how you go.
          <!DOCTYPE html>

          Cheers!

          • Clinton Gallagher says:

            Thank you for hanging in there Jas and a DOCTYPE was what it needed. I’ll leave the reference file where it is as long as I keep hosting on that server which I expect will continue to be a long time.

            The missing DOCTYPE was staring me right in the face and I didn’t even see the obvious. There should be a name for this phenomena: blurry code vision. lol

            Also interesting to note the LeagueGothicKit1 example with the IE hack produces results in IE but not Chrome or Firefox. Getting confused about which hack to use is also part of the problem and others should view source to see the difference of what works for IE7, IE8 and IE9 –and– Chrome and Firefox as of today’s date

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.