Entypo Icon Font in Titanium

I've attempted a small CommonJS module and sample Alloy application to demonstrate how the Entypo Icon Font could be used in a cross-platform Appcelerator Titanium mobile app. This module would allow a developer to access the exhaustive 250+ (!) Entypo icons using Titanium's native UI from two common TrueType font files included within an app. My sample app runs on both iOS and Android, although it is tailored and more completely tested on the iOS iPhone simulator.

Note my technique might work for other icon font sets as well, but Entypo was the most complete set I could get up and running in Titanium relatively quickly. The challenging part for a pure JavaScript implementation is finding the right way return the proper Unicode value(s) from the higher character points frequently used in icon font sets. Fortunately, I found a shim function in the Mozilla JavaScript docs which would consistently return a Unicode value or pair that the JavaScript fromCharCode() string method would accept. There are only a few Enypo exceptions (suitecase and cc-sa), you will see these represented in the sample app as a block instead of the intended pictogram.

I also found some other string/hex conversion functions that might be useful for similar implementations of other icon font libraries, so I've left those unused in the CommonJS file.

Screenshots:

...and on Android:

Pros:

• Dynamic styling through standard font properties and units of measure (color, size)
• Small file size (both font files together < 50 kB, contains 250+ icons, could be made even smaller by tailoring the font package to include only required icons)
• Gracefully scalable without noticable distortion
• Developer-friendly CC BY 3.0 license (Entypo pictograms by Daniel Bruce — www.entypo.com)

Cons:

• Monochrome (only single color without shading, shadow, or other special effects)

Example usage:

var entypo = require('ti.entypo');

var iconFont = 'Entypo Social'; // use the friendly-name on iOS
if(Ti.Platform.osname=='android') {
   // on Android, use the "base name" of the file (name without extension)
   iconFont = 'entypo-social';
} 

var label1 = Titanium.UI.createLabel({
   color:'#000',
   backgroundColor: 'transparent',
   text:entypo.fromName('github'),
   font:{
      fontSize:40,
      fontFamily: iconFont
   },
   textAlign:'center',
   	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
});

Above Ti.UI.label object would render the Github pictogram like this (top icon):

Other notes:

• Included Alloy sample app demonstrates each of the available icons, along with demonstration of dynamic color and size changes. I'd apologize for mistakes in the coding standard, however, that would assume I've used any coding standard at all!
• Review Appcelerator docs on installing fonts, and platform differences.
• Review licensing notes at Entypo homepage regarding differences between the font icons (CC) and the social extensions.
• Find human-friendly font names by searching the JSON model (exports.codeMap), searching within the demo app, or hovering your mouse cursor over pictograms in the online character map.
• For Alloy framework apps, copy the font .ttf files into /assets/fonts. For standard Titanium code, copy the font files into /Resources/fonts.
• Any font containing a 'social' search tag requires the entypo-social.ttf file, while everything else requires entypo.ttf.

Contributions or suggestions are welcome. @2wheelsburning