jQuery UI Buttons using Custom Icons

Demo | Source

Everything jQuery rocks!

jQuery makes JavaScript development enjoyable.  jQuery UI gives us common functional components that are easy to configure and even easier to plug into our applications.  jQuery UI Themes gives us the ability to stylize our applications using easy to learn conventions; furthermore, jQuery UI trivializes theme switching.

So why do we need to customized our jQuery button icons?  The truth is is that we probably don't; however, I tend to find myself wanting more when it comes to out-of-the-box jQuery icons.

Awhile back, I created a project on CodePlex for ASP.NET Web Forms called Iconized Control Set.  You can read about it here, download the bits here, and demo it here.  The following is the description from CodePlex: "ASP.NET WebForms IconizedButton Custom Control Set. Replaces the dull Button/LinkButton/HyperLink controls with styling and left and right aligned icons (via FamFamFam icon set). Contains built-in control styles/skins. Available customized user-configured styles/skins via CSS."

I wanted something similar to my Iconized Control Set, yet I wanted to use it for raw HTML and possibly for ASP.NET MVC.  While I plan on creating an MVC HTML Helper to abstract the details, I'm not quite ready to go down that road; however, the code here will help me create the MVC HTML Helper in due time.

While I consider this a proof-of-concept, I've tested the output in FireFox, Chrome, and IE 8 and it appears to working just fine.

In building the custom icon functionality for the jQuery Button, I once again relied on the excellent FamFamFam icon set.  The FamFamFam icon set is not a requirement to use this customization implementation; however, I find that the FamFamFam icon set gives me what I need and then some.  That said, you can certainly create your own classes and use any icons that you desire.

Okay, enough background and introduction stuff....  On to the demo...

Take a look at the demo here.

Beyond the standard jQuery imports and configuration, you will need the resources located in the code download here.  Once you have you jQuery import and configuration set up, you will need to add the following two CSS imports to your page:

<link type="text/css" href="assets/css/fff.icon.core.css" rel="stylesheet"/>
<link type="text/css" href="assets/css/fff.icon.icons.css" rel="stylesheet"/>

Once you have that, all you need to do is pass your custom icon class to the button widget function in the standard jQuery button widget implementation:

$(function(){            
    $(".nav a").button({icons: {primary: "fff-icon-house-go"}});                  
});

Note.  The demo and download both have all the custom CSS classes in one file.  While this makes a demo like this easy, this file is big and is not recommended in production.  Extract the icon classes that your application uses and put those classes into one of your application stylesheets.

Okay, that's about it. Thanks for reading...