APEX and Scalable Vector Icons (Icon Fonts)

For a couple of years now webdesigners and developers don't use image icons anymore, instead we moved to scalable vector icons.

Before you had to create different images for the different formats and colours you wanted. Then to gain performance we created one big image with all those smaller images in it (called a sprite).
Next with some CSS we showed a part of the bigger image. A hassle...

In fact the evolution of using icon images you can perfectly see in APEX too. If you go to your images folder you will see many .gif files, all different icons:

In a later release APEX (till APEX 4.2) moved to sprites (see /images/themes/theme_25/images/), for example the Theme 25 sprite you see here.

The scalable vector icons (or icon fonts) solve the issues the image icons had. With the vector icons you can define the color, size, background etc. all with CSS. It makes building responsive applications so much easier, the icons stay fresh and crisp regardless of the size of the device and it's next to no overhead. This is exactly what APEX 5.0 will bring to the table: nice scalable vector icons, handcrafted and made pixel perfect by the Oracle team.

Image from Font Awesome 

In fact you don't have to wait till APEX 5.0 is there, you can add icon fonts to your own APEX application today.

There're many icon fonts out there, but here're some I like:

• Font Awesome - One of the most popular ones and probably included in APEX 5.0 too (next to Oracle's own library)
• Glyphicons - This library is for example used by Bootstrap
• Foundation Icon Fonts 3 - Used by the Foundation framework
• NounProject - I saw the founder at the TEDx conference and was very intrigued by it - they build a visual language of icons anyone can understand
• IcoMoon - This is more than an icon library, you can actually create your own library with their app. When my wife creates fonts in Illustrator, IcoMoon transforms them into a font.
• Fontello - You can build your own library based on other libraries on the net (the site shows many other popular font libraries I didn't put above), so if you can't find your icon here, you probably want to build it yourself :)

In the next post I'll show you how to integrate one of those in your APEX app.