Flexible Size, Flexible Color Icons for jQuery-UI

Different Icon Size, Different Icon Colors for jQuery-UI
Different Icon Size, Different Icon Colors for jQuery-UI

Achieving different size, different color icons in jQuery-ui and non-jQuery-ui web apps.

This tutorial reveals how FontAwesome icons can be used rather than trying to resize existing jQuery-ui icons.

I initially wanted jQuery-UI icons to be available in different sizes, for example:

<span class=”ui-icon ui-icon-pencil”></span> A Pencil Icon (existing)

<span class=”ui-icon ui-icon-pencil large red”></span> A large, red Pencil Icon (ideal, read on…)

The solution I found does not require jQuery or jQuery-UI but works perfectly seamlessly with it regardless.

Here’s how it’s achieved

Any Size, Any Color Icons for jQuery-UI

As mentioned in the intro, this is not just for jQuery-UI, it’s not dependant on anything really.

It works on all browsers (excluding IE6).

So, here it is, the solution: FontAwesome.  http://fortawesome.github.com/Font-Awesome/

  • Huge number of icons.
  • Can be any color.
  • Can be any size.

And that’s it……. simple as that…… (bar an IE9 issue when IIS is used to deliver the site, see paragraph below)

Examples

The icons are very similar to the jQuery-UI icons so they work seamlessly with it.

Aligning the icons with the text and changing color:

change size and color of jQuery-ui icons. Aligning the text and icons using CSS. Changing the icon color with CSS
Change size and color of jQuery-ui icons. Aligning the text and icons using CSS. Changing the icon color with CSS.

Using ‘vertical-align: xyz’ to align the text/icons

 

 IE9 from IIS Issue:

From this and these people who know more about this than me, this tweak is necessary to get the icon-font to work in IE9 when the webpage is delivered from IIS. This cost me several hours.

Change
src: url(‘../font/fontawesome-webfont.eot?#iefix’) format(‘eot’), url(‘../font/fontawesome-webfont.woff’) format(‘woff’), url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’), url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);
to
src: url(‘../font/fontawesome-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘../font/fontawesome-webfont.woff’) format(‘woff’), url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’), url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);

 

Here’s how I came to choose FontAwesome after failing with an alternate jQuery-ui technique

Failed jQuery-UI specific attempt

The icons are all contained in one image. The corresponding CSS positions the image so that only the specific icon is displayed in a small view area. The remainder of the image is hidden.

Looking in the jQuery-UI CSS file, this code shows which image is used,

There are different color images for the different icon states (or colors, see this blog).

Looking at the cart icon for example:

.ui-icon-cart { background-position: -48px -112px; }

It’s clear how the images is positioned to reveal only the part of the main image that is the cart icon.

So, if we simply create a new resized version of ‘ui-icons_333333_256x240.png’ to be 512 x 480 (double the size), e.g. ‘ui-icons_333333_512x480.png’.

Now all we need to do for a larger cart  is double the position numbers in the CSS to reveal the larger icons.

Example:

 

We now get a larger icon as so:

 

In fact to avoid having to manually create CSS rule for each icon we can use JS to do it for us.

The problem with this approach is that (using GIMP 2) I was unable to resize the icon images successfully. They were either blurred or pixelated. If anybody can solve this, then this approach will work a charm. Changing the icon colors can be achieved as described in this other blog.

 

Conclusion

So, in short, I’d advocate using FontAwesome with jQuery-ui to achieve flexible-color, flexible-size icons rather that trying to work image-resizing miracles.