Learn and share. The simplest harmony.


Mini Collection for Prefix & Postfix Input Form

Posted on July 9, 2012 and got 11 shouts so far

On developing an application sometimes I need an instant library for prefixing and postfixing an input field on a form, I don’t have one so I decided to make it to be used on future project. This library using Font Awesome for the icons of the prefix and postfix, go through the post to see the sets.

The Sets

This library contains twenty four different icons, they are : email, link, external-link, attach, tag, home, key, credit-card, cart, user, trash, folder, save, marker, setting, edit, bookmark, calendar, gplus, twitter, github, pinterest, linkedin and facebook.

Each of them has seven different colors, they are : orange, magenta, dark grey, green, blue, red and grey as default color. Here’s the shot from some of them :

Technology & Usage

I’m using jQuery for adding prefix and postfix beside the input form and CSS for styling, for the background color I’m using linear-gradient with support up to four different vendor prefixes (-moz, -webkit, -o & -ms) and also the standard code. For the icons, like I describe before I’m using Font Awesome. I also add support for placeholder attribut on the input for old browser.

To use this set, include minippfix.css and minippfix.js along with modernizr.js and jquery.js, put font/ folder to the right place. After all set, you can already use this library by describing like following markup :

As you can see above there are three to four class name we need to put on class attribute, first is ppfix, this class name needed to as default class name, pre or post class name is for the position (prefix or postfix), the third is icon name it can be email, gplus, home or other icon name (see demo) and the last class name is color. Here are the result from above markup :

That’s it. Please enjoy and spread to the world!


This Post Tags :

Bookmark Post :

Pin It
  • Thanks a lot…..

  • Thanks a lot!!

  • Thanks a lot! Can I use it with select, or only input?

  • Thanks for sharing! God Bless!!

  • Thanks for sharing! Very nice and useful.

  • This is a very nice collection. Thanks for sharing!

  • minippfix.js throws the following error in IE8

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; BRI/2)
    Timestamp: Thu, 26 Jul 2012 12:02:39 UTC

    Message: Object doesn’t support this property or method
    Line: 23
    Char: 4
    Code: 0
    URI: http://webstuffshare.com/demo/PPFixInput/javascript/minippfix.js

    • I got the same error! But this is really a awesome work!

  • Really cool! But i guess that icons on the right os the input could make user understand that it is a call to action button…

    In my opinion a good use of it is just the icon at the right at the field without the box :)

    But the idea is great :)

  • Excellent demo, Hidayat!

    On Opera on Mac, with FontAwesome installed, the font renders badly. I overcame the issue by renaming the name of the font in the @font-face declaration to FontAwesome-webfont to prevent Opera from attempting to use the locally installed font.


  • nice tutorial, but just wondering how to add new icons, like “mobile phone” or “fax”