Icon fonts and their usefulness in iOS development(kylerosenbluth.com)
kylerosenbluth.com
Icon fonts and their usefulness in iOS development
http://kylerosenbluth.com/2012/10/8/fonts
5 comments
Haha, yeah... I originally found out about it when browsing the Chrome Store [1] - if you download it as a Chrome app, then it even works offline..
[1] https://chrome.google.com/webstore/detail/icomoon/kppingdhha...
[1] https://chrome.google.com/webstore/detail/icomoon/kppingdhha...
Wow thanks for this! I was just looking for something like this to generate fonts so I can stop using pngs. Awesome!
Wow, this is awesome!
What, no FF Chartwell?
http://tktype.com/chartwell.php
As long as you can turn on ligatures in your font rendering API per-platform, this is a fully cross-platform solution to graphing, in a font file.
(Using printf's, basically, to do complicated graphs - absurd and awesome!)
http://tktype.com/chartwell.php
As long as you can turn on ligatures in your font rendering API per-platform, this is a fully cross-platform solution to graphing, in a font file.
(Using printf's, basically, to do complicated graphs - absurd and awesome!)
Hinting and the Web
Webfonts are not currently offered.Ok, I might be a bit slow. Can somebody explain to me the advantage of using a font file instead of a sprite png?
I understand that there would be advantages with a high resolution display. It would scale automatically. Anything beside that?
I understand that there would be advantages with a high resolution display. It would scale automatically. Anything beside that?
It's just easier. With a pngs you have to scale, size and filter appropriately with an image editor, and keep track of all of them. With an icon font, you just do font-size: 24px, and if that's too large, 18px. Change the colour? color: red. And you only have one file to deal with.
CSS text effects, dynamic color, sizing, etc. Creating assets for 6 different button sizes gets a hell of a lot less complicated with an icon font.
One way I like to use them is to easily apply style like dropshahow to them through CSS. It's so easier to tweak it thought CSS than to go back to photoshop each time
The better question is what does this gain you over a vector format.
And the answer to that question is autohinting and (not on iOS) subpixel AA.
How well hinted are the common icon fonts, actually? Given that many (if not most) freely-available typefaces are actually not hinted at all I'd be a bit skeptical. Autohinting doesn't really produce very convincing results for typefaces, I wouldn't expect it to do wonders with images either.
That's a good question. I know that the Font Awesome project has better hinting for smaller sizes as a stated goal. Currently hinting does seem to improve their icons at 12pt but below that, it doesn't give much help.
Subpixel rendering is, of course, very helpful. It's really preposterous though that we have to resort to abusing fonts to get subpixel when implementing it for arbitrary vector rendering is so straightforward.
The other big problem with using fonts for hinting support is that people have differing opinions on the value of hinting for fonts, but everyone would probably agree on the value of hinting for icons. If you disable hinting because it hurts your eyes (or because you use OS X and don't have a choice), then you're going to miss out on icon hinting as well.
Seems to me what we really need is a client side solution for rendering arbitrary SVG with either manual hinting or icon-optimized autohinting (which might be too general of a concept to be doable).
Subpixel rendering is, of course, very helpful. It's really preposterous though that we have to resort to abusing fonts to get subpixel when implementing it for arbitrary vector rendering is so straightforward.
The other big problem with using fonts for hinting support is that people have differing opinions on the value of hinting for fonts, but everyone would probably agree on the value of hinting for icons. If you disable hinting because it hurts your eyes (or because you use OS X and don't have a choice), then you're going to miss out on icon hinting as well.
Seems to me what we really need is a client side solution for rendering arbitrary SVG with either manual hinting or icon-optimized autohinting (which might be too general of a concept to be doable).
Can you do sprites with a svg, though? If not, there's the single file aspect.
I just started using it icon fonts. I was initially using SVGs using an IMG tag, but the issue there is that you can't change color, opacity, or style it with CSS.
You can sprite SVGs, but you have to maintain it just as you would have to maintain a sprite of PNGs. The only advantage being that a sprited SVG would scale to a HDPI monitor without needing a second set of higher resolution images.
I ended up going with icon fonts because it requires significantly less CSS than dealing with the position of an icon in a sprite. I actually find it is easier to maintain since I can style icons with shadows, opacity, color, etc.
One drawback, using icon fonts generally means having flat icons. You can't have fancy 3D-like iconography.
You can sprite SVGs, but you have to maintain it just as you would have to maintain a sprite of PNGs. The only advantage being that a sprited SVG would scale to a HDPI monitor without needing a second set of higher resolution images.
I ended up going with icon fonts because it requires significantly less CSS than dealing with the position of an icon in a sprite. I actually find it is easier to maintain since I can style icons with shadows, opacity, color, etc.
One drawback, using icon fonts generally means having flat icons. You can't have fancy 3D-like iconography.
You can reference a viewBox when referencing an SVG. This uses fragment notation in the URI. It would clash a little with a proposed syntax for native sprites for images (was recently brought up on the www-svg mailing list), I don't know whether or how it was resolved yet.
Check out this: http://simurai.com/post/20251013889/svg-stacks
It's supported in places where a vector format is not (namely, older versions of IE that don't support SVG).
Plus, icons are easier to handle as a regular text/font asset, than as SVG, and you can use all the tools available for web typography for them.
That said, why we never had a simple vector _IMAGE_ format for the web is beyond me.
By which, I mean a simple format to display vector images at various sizes, a simple vector decoder, with no animation, javascript, styling and other stuff. A JPEG/PNG equivalent for static vector images.
That would be dead easy to add support for, compared to SVG (just treat as any other image format) and it would handle lots of use cases.
Plus, icons are easier to handle as a regular text/font asset, than as SVG, and you can use all the tools available for web typography for them.
That said, why we never had a simple vector _IMAGE_ format for the web is beyond me.
By which, I mean a simple format to display vector images at various sizes, a simple vector decoder, with no animation, javascript, styling and other stuff. A JPEG/PNG equivalent for static vector images.
That would be dead easy to add support for, compared to SVG (just treat as any other image format) and it would handle lots of use cases.
Well, you can mostly treat SVG as any other image format. You just have to set your pipeline up for it and avoid some SVG features.
I wrote a script which generates iOS tab bar icon-sized sprites from the Font Awesome icon font: https://github.com/jogloran/Font-Awesome
This title is pretty poor, could we get it changed to "How to use icon fonts in iOS development and why they are useful" or something like that?
Sure thing.
[1] http://icomoon.io/app/