Needs more icons!

[asgeo1]

The selection of icons available for use in jQuery Mobile is very small.

Most of the time I can't find anything useful. Yeah, I could go make my own icons, but it's such a pain.

Are you guys planning on including more icons in the future?

Why not use the Font Awesome icons (http://fortawesome.github.com/Font-Awesome) that Twitter Bootstrap uses?

In fact, someone has tried integrating Font Awesome with jQuery Mobile before - https://github.com/commadelimited/jQuery-Mobile-Icon-Pack

but... it's it bit buggy and didn't really work with position=fixed icons.

Anyway... it would be awesome to see support for more icons!

[johnbender]

@asgeo1

One of the things I was thinking about with regards to this (I like the icons) is that the file size for the font face is crazy huge when considering how many icons a given application is going to make use of.

$ ls -lah font/
total 416
drwxr-xr-x@ 7 nickel  staff   238B Mar  9 06:12 .
drwxr-xr-x@ 9 nickel  staff   306B Mar  9 06:12 ..
-rwxr-xr-x@ 1 nickel  staff    41K Mar  9 06:12 fontawesome-webfont.eot
-rwxr-xr-x@ 1 nickel  staff    72K Mar  9 06:12 fontawesome-webfont.svg
-rwxr-xr-x@ 1 nickel  staff    21K Mar  9 06:12 fontawesome-webfont.svgz
-rwxr-xr-x@ 1 nickel  staff    41K Mar  9 06:12 fontawesome-webfont.ttf
-rwxr-xr-x@ 1 nickel  staff    23K Mar  9 06:12 fontawesome-webfont.woff

Is there some way around this otherwise I don't see how we could include something like this in the library. Honestly I don't see how anyone serving a application to bandwidth starved mobile devices could use something like this for a couple icons :(

Again, to be totally clear, I've not used this approach nor am I knowledgeable about it so I might be missing something obvious.

[frequent]

I have been thinking about this for a while after setting up my own iconSprite. I ended up with 40+ icons which is >20k, so I guess file size will add up real quick once you expand available icons.

Thinking:
As you are setting up a download-builder to allow custom JQM-builds, how about doing the same for icons, aka a "custom-iconsprite builder".

I thought about this after looking at compass sprites - http://compass-style.org/help/tutorials/spriting/ .

Say I only need 5 icons... I'd use the JQM iconsprite-download builder, select the 5 icons I want and (with some magic in the background) I'd have my custom JQM-5-icon-sprite with corresponding CSS inside my jqm.css file.

If all icons were treated stand-alone and sprites were custom-buildable, users could also submit their own icons as potential add-ons/added value.

Beats just expanding the available sprite and bloating up the file size, doesn't it?

[johnbender]

@frequent

I wonder if 40+ icons is the norm (It may well be) but having a builder would solve the issue. I think this'll probably fall pretty low on our priority list since we're just getting to a module builder!

[frequent]

@johnbender - just idea to maybe keep in mind for later.

I only added to my sprite once I needed an icon. Adds up quickly. I guess it really depends on what an application is for. So some flexibility in terms of iconsprites eventually won't hurt!

[toddparker]

Since @commadelimited already has a standalone project that includes the suggested font pack, I'd suggest that this issue we logged there to resolve the issues mentioned. I agree with @johnbender that although we may add a few icons over time, to do this right, there needs to be a huge set of 200+ icons and a builder to keep size under control. Given the effort, we'll probably reply on other developers to release icon packs.

[toddparker]

Mind link this up to the feature request wiki page:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

We'll re-open when we tackle this feature.

[commadelimited]

According to caniuse.com, we might be able to get away with only supplying WOFF (Chrome, Firefox, Opera) and TTF/OTF (Chrome, Safari, Firefox, iOS, Opera Mobile).

http://caniuse.com/fontface
http://caniuse.com/eot
http://caniuse.com/woff
http://caniuse.com/ttf

-rwxr-xr-x@ 1 nickel  staff    41K Mar  9 06:12 fontawesome-webfont.ttf
-rwxr-xr-x@ 1 nickel  staff    23K Mar  9 06:12 fontawesome-webfont.woff

Those 2 fonts total 64k. Still not great, but better. The way the Font Awesome team has their font set up seems to add extra file size as they're using unicode characters. Perhaps the jQM team could elicit a custom build as a temp measure?

[commadelimited]

Also Todd, when you do get around to an icon builder, please let me know. I'd love to contribute my projects into the core.

[toddparker]

Thanks @commadelimited. I don't think we'll tackle this for a while, if at all, but we can re-visit. I'd rather figure out way to make it easy to use any font package you want instead of curating our own since there are so many font packs out there. Any ideas are welcome.

[commadelimited]

Having never made a font face before I'm not sure I could comment.

I suppose it might be possible to create a builder using a font face combined with Canvas. Output the letters of the font onto Canvas at a specific pixel height, then save the image as a transparent PNG,