Fork us on GitHub

Using Icon Fonts Such as Fontello

An easy to follow tutorial for more expressive icons
Post Image

Using Icon Fonts Such as Fontello

A lot of our focus in the past couple of releases has been around the material design icon fonts, they changed the way we build UIs. We also support arbitrary font icons, this features isn’t limited to material icons and we blogged about it a while back.

After going back and forth with developers we got the sense that using an icon font such as fontello wasn’t clear. In this short tutorial we’ll try to explain the process and benefits.

On an unrelated note, if you haven’t upvoted our stackoverflow ad please do this now & help us promote Codename One!
Click on the up arrow next to the ad if you have a stackoverflow account.

Why Icon Font & Not MultiImage?

Both have their place. When in doubt I would pick an icon font as it allows us to adapt the colors dynamically. It can even change the color based on state (e.g. different icon color for pressed/released state).

Another big advantage for icon fonts is application size which can be small. Some designs aren’t achievable with icon fonts in which case there is no other option.

Getting Started

Go to the icon font website e.g. and select the icons you want.

Notice the license terms for each font as fontello might mix different font licenses!

Once you picked the desired icons click the download button and save/extract the font zip file.

Fontello website with icon selection
Figure 1. Fontello website with icon selection

Once you unzip the file copy the fontello.ttf file to the src directory in your project. Then open the demo.html file in the browser. Click the show codes checkbox on the top right side and you should see something like this:

Fontello demo html file
Figure 2. Fontello demo html file

If you look at the symbols you will notice they are hex values, e.g. notice the heart symbol in my font matches 0xe809. This would be the value for the FontImage when we create it, you can convert it to Java syntax with the \u notation as \ue809;

E.g. I can create a 4mm red heart icon using:

Font fnt = Font.createTrueTypeFont("fontello", "fontello.ttf");
int size = Display.getInstance().convertToPixels(4);
FontImage fm = FontImage.createFixed("\ue800", fnt, 0xff0000, size, size);

A better approach would use styles. We can define UIID’s in the designer and pick fontello.ttf from the combobox of fonts as such:

Using styles for icon fonts is the best way to define icon fonts
Figure 3. Using styles for icon fonts is the best way to define icon fonts

Once you define a style in the theme it’s easy to keep it consistent with everything else. E.g. I can change the code above to create a red heart like this:

Style s = UIManager.getInstance().getComponentStyle("RedIcon");
FontImage fm = FontImage.createFixed("\ue800", s);

We can also create a selected variation using getComponentSelectedStyle:

Style s = UIManager.getInstance().getComponentSelectedStyle("RedIcon");
FontImage fm = FontImage.createFixed("\ue800", s);

And the pressed version using getComponentCustomStyle:

Style s = UIManager.getInstance().getComponentCustomStyle("RedIcon", "press");
FontImage fm = FontImage.createFixed("\ue800", s);

Final Word

We love flat design, it made font icons pervasive and those are easy to work with. Once you pick them up you will find it hard to stop using them.

If you have any thoughts on how to make the font image API’s easier to use let us know…​

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.