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.
Go to the icon font website e.g. fontello.com 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.
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:
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
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:
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
Style s = UIManager.getInstance().getComponentSelectedStyle("RedIcon"); FontImage fm = FontImage.createFixed("ue800", s);
And the pressed version using
Style s = UIManager.getInstance().getComponentCustomStyle("RedIcon", "press"); FontImage fm = FontImage.createFixed("ue800", s);
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…