Hacker News new | ask | show | jobs
by ansimionescu 4402 days ago
I'm not much into frontend development, but AFAIU Font Awesome is a bunch of assets packed as a font [0]. Why is this is a good idea? Is it faster, smaller, more convenient, something else?

0: http://stackoverflow.com/a/15503304

4 comments

A lot of font-icons allow you to set the the icon using class names. So rather than linking to a specific image file or using some obscure ascii code like in the stackoverflow example you linked to, I can just add a class name like 'icon-user' and the user icon will show up. It's definitely easier in some situations.

Font icons are scalable too, which makes it really easy to change the icon size on the fly. Since I do all of my development directly in the browser, I never know how big I need my icons until I've done some experimenting with different sizes. Font icons make this experimentation process a lot easier because I don't need to update an image file. I can just change the font-size property in css.

Minified, Fontawesome is 21kb - which for a single HTTP request [1] the ability to use all of the icons at any size and color and have them look fantastic (for values of "fantastic" that mean no jaggies).

It's incredibly convenient not to have to generate multiple sizes of icon/pictograms for a project. Beyond even just needing multiple sizes for different uses (a list vs a header) - with the advent of high dpi mobile screens you'll also need to re-generate all of the images in @2x versions if you want the images to not look fuzzy.

Beyond that, there is now a whole ecosystem of addons that make use of the library

One of several different icon pickers: http://victor-valencia.github.io/bootstrap-iconpicker/

Leaflet Map Markers: https://github.com/lvoogdt/Leaflet.awesome-markers

1 - BootstrapCDN will even host it for you: http://www.bootstrapcdn.com/#fontawesome_tab

The author is providing some use cases on the website. Other than that, I find this particularly useful for mobile applications. Embedding a font and rendering a text component with a custom font is less than optimal just for using some icons.
There are some cases where you don't want the whole bunch of font-awesome in your project, illustration or what ever. E.g. for mockups it's very easy to use, you just use it to drag and drop the icons you want.