Show HN: Font Awesome to PNG | Hacker News Reader

Show HN: Font Awesome to PNG

fa2png.io

128 pointscommanderj48 comments

Somewhat relatedly: http://fontello.com. Helps you generate your own icon fonts using a smaller selection of icons instead of using the entire Font Awesome library, which can be up to 253kB depending on your browser.

There's a great gem for using it with rails [1], a cli [2] and grunt task [2].

[1] https://github.com/railslove/fontello_rails_converter

[2] https://github.com/paulyoung/fontello-cli

[3] https://github.com/jubalm/grunt-fontello

I personally prefer IcoMoon which generally has a lot more options and their font builder (for custom glyphs) works much better.

We've started using fontello recently. We use some custom svg assets in addition to the icon font sets. I wrote a ~100 line python script that manages interactions with fontello. It'll open a browser with our config file, let you make changes, then download and store the updated fontello assets mostly from the command line. I highly recommend doing something like this if you get on board the fontello train.

What does that buy you that using something like gulp-iconfont https://github.com/nfroidure/gulp-iconfont doesn't?

That project doesn't seem to integrate with Fontello at all.

Right, the point would be to not require a bunch of scripts to tie into an online service to generate a font. Instead you just do it all locally at build time.

You can also make subsets with any font on Google Fonts, using the text= parameter e.g. https://fonts.googleapis.com/css?family=Creepster&text=JAVSC...

Is there a similar library that can use local assets? I'd prefer to remove an external website dependency from my build process if possible.

I had that same question some time ago. I found that Google uses Python bindings[1] for fontforge, but it had that dependency on fontforge. So I opted for a Python-based solution called fonttools[2] instead, and it works pretty well. It comes with a utility called pyftsubset which you can use like so:

    pyftsubset FontAwesome.otf U+f0{2c,9e,99}

This creates a file called FontAwesome.otf.subset that has the selected glyphs. The FontAwesome site has the Unicode value on each icon page.

[1] https://code.google.com/p/googlefontdirectory/source/browse/...

[2] https://github.com/behdad/fonttools/

If you haven't already, check out http://fontcustom.com/. Its like Font Awesome, except you drop a directory of SVGs at it and it generates a ton of fonts. The project could use help in a few areas including:

- Sprockets asset pipeline integration https://github.com/glaszig/compass-fontcustom

- A PNG sprite compiler for compatibility with IE8, Win7/8 phones, and older versions of Android.

I can't say enough good things about these projects.

I'd suggest putting example values inside input forms, not only as a hint in placeholder so sample preview could be generated instantly with only one mouse click. People are lazy now.

A friend of mine needed the same thing (font awesome as pngs) and he created a script. I helped a little bit and added a branch to work with other fonts as well. It was hacked in a day or two, after it served its purpose we didn't work on it, but if anyone finds it useful here's a link:

https://bitbucket.org/selectnull/awesome2png

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

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.

Really nice idea! There are often situations where a tool like this can come in handy.

However, maybe it is just me, but I find this writing style irritating. I find it a little bit creepy when a product starts adressing me from a first person view.

"Why am I useful you might ask? While I find your question a bit offending..."

'Why' was the first thing I was thinking but apparently offensive!

It's just a single-purpose little hack, not a product, let the author have his fun.

What a coincidence, I made the FA icons downloadable in 6 colors and 8 sizes just over this weekend as well [1]. One should note, however, that it's 99% odyniec's great script [2] and only 1% some trivial frontend/collection for both projects. [1] https://github.com/delight-im/Font-Awesome-PNG [2] https://github.com/odyniec/font-awesome-to-png

This is great, but it'd be far better if I could put in multiple ones and get out a sprite sheet. I'll take a look at the repo to see if this is possible.

Shameless plug:

This Android app I wrote serves the same purpose: https://play.google.com/store/apps/details?id=ly.jamie.fonta...

Source: https://github.com/jamiely/Font-Awesome-Browser-Android

Please do this with Entypo! I've been wanting to use their library forever, but it doesn't work on some machines. http://www.entypo.com/

I have written an OSX app to convert icons from any TTY font file to PNG or svg https://github.com/shanzi/iconfontr

Make an SVG option, please.

This.

From an perfectionist perspective - a font is a font, those were made for text. They're used for icons just because it's widely supported option that allows arbitrary coloring and scaling - so when one need a red 0.6cm-sized icon, they get it with a simple directive.

SVG is a graphic format that also has such possibilities while being more semantically correct by not even slightly abusing text (even though icon fonts generally use that private Unicode area).

I would suggest using Grunticon as opposed to font awesome. https://github.com/filamentgroup/grunticon

I think using this will increase my mockup page speed a bit. Cool!

Hoped to find the code on GitHub, but couldn't. Any reason not to open source it? Seems like it would be an interesting codebase to take a quick look at.

https://github.com/odyniec/font-awesome-to-png/blob/master/f...

In that one rare occasion where I had to convert a FA icon to a png file, I wrote a basic HTML page with the icon, screen captured it, and resized.

This seems better.

That's potentially a really poor way of doing it; if your browser/OS does subpixel rendering the resulting PNG could look terrible on other machines.

Not to mention lack of alpha transparency.

I put together Font Pestle for this purpose: http://miln.eu/fontpestle/

Or you can just use any imaginable icon set in IcoMoon, export the PNGs and color/resize them in Photohop.

Resizing PNGs? Works only reasonable if you make them smaller...

Aero just turned off when I opened up the icon list. Windows 7, Chrome 34.0.1847.131. Anybody else got that?

A good demonstration of the usage of <input list> and <datalist>.

Awesome, I was actually looking for something to do this earlier today!

very cool - I would also like to drop the name of one of my favorite (free) icon sites IconMonstr.com and they basically have new icons every week SGV/PNG.

Nice utility to have !!!

this is pretty awesome. been needing something like this every now and then. however, keep in mind there are free packages that provide similar artwork as font awesome in .png and .eps.

very cool!

fa2png is an unfortunate name for a project, really.

In what way?

  It's googlable.

  It's unique.

  It describes exactly what it does.

  And if follows a huge tradition of x2y tools (pdf2text,      etc etc).

If I had to guess, maybe it looks a bit like the word "fapping"?

It is far enough away to be a rorschach test

Reply on news.ycombinator.com