Icon fonts and their usefulness in iOS development

http://kylerosenbluth.com/2012/10/8/fonts

by designatedInit • 14 years ago

47 23 14 years ago

maratd• 14 years ago

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?

knes• 14 years ago

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

lucian19002• 14 years ago

The better question is what does this gain you over a vector format.

pyre• 14 years ago

Can you do sprites with a svg, though? If not, there's the single file aspect.

mistercow2• 14 years ago

And the answer to that question is autohinting and (not on iOS) subpixel AA.

victorma• 14 years ago

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.

pault• 14 years ago

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.

TazeTSchnitzel• 14 years ago

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.

nwienert• 14 years ago

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?

designatedInit2• 14 years ago

Sure thing.

citruspi2• 14 years ago

Anyone interested in using Icon Fonts should definitely check out [1] - it allows you to generate and download icon fonts by selecting vectors from different packs.

[1] http://icomoon.io/app/

redeemedfadi• 14 years ago

Wow thanks for this! I was just looking for something like this to generate fonts so I can stop using pngs. Awesome!

designatedInit2• 14 years ago

Wow, this is awesome!

citruspi2• 14 years ago

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...

jogloran• 14 years ago

I wrote a script which generates iOS tab bar icon-sized sprites from the Font Awesome icon font: https://github.com/jogloran/Font-Awesome

primitur• 14 years ago

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!)

chrisdroukas• 14 years ago

   Hinting and the Web
   Webfonts are not currently offered.

Icon fonts and their usefulness in iOS development

Related Stories