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!
