Font Awesome!

It’s quite some time I don’t blog… But I didn’t disappear! it’s just that things have gotten pretty busy lately; it’s so much time though that I decided to write some quick recipe nevertheless, something perhaps worth of a Friday Fun blog, (although of course I didn’t make it for Friday… I hope to be in time to get referenced from the FXExperience blog though, it’s a lot of time I miss from there too!).

Recently, I was introduced to an incredible collection of font icons: Font Awesome. The idea is pretty clever, basically embedding SVG descriptions of icons inside a true type font so that they can be referenced by their unicode id. So you basically can add to your web page with just the magic of a little CSS, those fantastic icons anywhere a font could go.

This is all wow and cool. But how do I, as Java programmer, use those icons then? Apparently, there’s no easy way to convert them to some image format and use them, right? You don’t want me to grab screenshot from the website and clean the background with Gimp, do you?

Well, let’s see what we can do.

JavaFX is the next cool thing, but I will disappoint you, and only show the trick for Swing. Also, for this trick to work out you need two things:

  1. Nice background music
  2. It’s Saturday, so a cocktail

Because I’m a nice person, I’ll suggest you both 😉

For the music, I recommend for this special The Cardigans, Gran Turismo. It’s a very wonderful album, clearly written completely around the wonderful and gentle voice of the singer.

What best drink to go accompanying Nina’s voice than a Cuba Libre then? One of my favorite drink of all the time, it’s an easy win:

  • 2 shots of Bacardi Superior Rum
  • Coke
  • 1/2 green lime (basically, you need the equivalent of half shot of lime juice)
  • Ice in cubes

Take a Collins type glass, put the ingredients directly in the glass, first the lime juice, then fill with ice and finally the rum. At this point, you can fill the glass with cola, decorate with the remaining lime and enjoy responsibly 🙂

But wait, this was supposed to be a blog post about fonts and Swing… Right, I didn’t forget!

So, I was saying before, the Font Awesome is a collection of icons embedded in the font.

For this reason it’s possible to use the font as basic font for Swing components as well as Java2D graphics objects, for example:

InputStream stream =
    FontAwesomeIcon.class.
      getResourceAsStream("/fontawesome-webfont.ttf");
Font awesome = Font.createFont(Font.TRUETYPE_FONT, stream);
JLabel label = new JLabel("Drink me!");
label.setFont(awesome);

Since this is a normal true type font, it’s possible to use the icons by referencing them by their unicode sequence. Let’s take a look at the font cheat sheet. You can see, the unicode sequence for the very appropriate glass icon (icon-glass) is UxF000, similarly the equally appropriate music icon (icon-music) is UxF001.

In Java, writing an unicode character is a matter of escaping the unicode sequence, so for example, change the line above with:

JLabel label = new JLabel(String.valueOf(‘UxF000′));

Will result in the label to show the glass icon.

We can make this more useful, embedding the whole icons in a proper Swing Icon, so that we can use the icon in buttons, labels, and whatnot without changing the fonts directly.

Instead of pasting code in this blog, which is a mess, I created a small project (with this and other tricks that I’ll fill in the next weeks/year 🙂 you can find it on my IcedTea server personal repository space:

hg clone

http://icedtea.classpath.org/people/neugens/SwingUIPatterns/ 

Look for the file FontAwesomeIcon.java to see how this is done, but it’s pretty easy. Basically, the icon allows you to specify the the unicode sequence of the FontAwesome icon you want to load plus the size of it. Font Awesome are SVG icons, so this will be properly scaled up or down as you desire.

Icon icon = new FontAwesomeIcon(‘\uf0e0’, 16); 

A little preview of how the above would look when applied to an icon and a JButton:

FontAwesomeIcon

I hope you enjoyed this post!

UPDATE 1: As Jonathan notes in the comment of the original article, you checkout those two post below to see how to integrate Font Awesome in your JavaFX application:

http://www.jensd.de/wordpress/?p=132 

http://www.jensd.de/wordpress/?p=178

UPDATE 2: orginal article referenced from: http://jroller.com/neugens/entry/font_awesome

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s