I’m looking for some feedback on this issue, i’m using Sencha Touch 2.0 to build hybrid apps packaged via PhoneGap/Cordova.
I would love to use a font to embed symbols (& get rid of resolutions issues auto-magically). I just love http://fortawesome.github.com/Font-Awesome/ for desktop & i’m wondering if it can fit in mobile apps as well.
However, I’m also trying to get the best possible perf.
Idea is to be able to use theses symbols on huge lists (>500 items). And i’m totally clueless on how theses methods (png vs. inlined-base64 vs. font) would compare.
Looks like Sencha team is using inlined-base64 over static pngs.
FontAwesome
I’m working on a project where we used to use FontAwesome and everything was working fine on iOS. But we had a big problem, it didn’t work on Android and we didn’t figure out how to solve this issue. So if you don’t consider making your app for Android phones or if it happens to work fine for you, then I would suggest to go for it. With a webfont, like you said, you don’t have to care about screen resolutions, you can change the colors and the size of the icons easily which I found quite convenient.
PNG
I guess the only problem with PNGs would be the number of HTTP request you make to get them. So the only advice I can give you is to use sprites. You could use something like Glyphicons which gives you icons pretty much like FontAwesome.
Inline Base64
The only problem with this solution is that images URIs must not be larger than 32k (according to When to consider base64 (DATA: URI) images?). It’s apparently not supported by IE6/7 which I think is not an issue because Sencha only support webkit browser.
So, from my experience, go for FontAwesome if possible, otherwise sprites should always be the way to go for static images.
Hope it helped