Show HN: Font Awesome to PNG

by commanderj • 12 years ago

128 48 12 years ago

SlAZ3• 12 years ago

very cool!

huangc10• 12 years ago

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.

arebours• 12 years ago

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.

iekadou2• 12 years ago

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

sinak• 12 years ago

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

geuis• 12 years ago

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.

rblatz2• 12 years ago

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

cobalt• 12 years ago

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

sp332• 12 years ago

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

etler• 12 years ago

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.

zxcvgm• 12 years ago

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/

ansimionescu• 12 years 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

23andwalnut• 12 years ago

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.

iekadou2• 12 years ago

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.

hsnim• 12 years ago

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.

michaelbuckbee• 12 years ago

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

dlsym• 12 years ago

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.

feralmoan• 12 years ago

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

mnx• 12 years ago

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

mahmoudhossam• 12 years ago

fa2png is an unfortunate name for a project, really.

coldtea• 12 years ago

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

billpg• 12 years ago

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

patrickocoffeyo• 12 years ago

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

mrchess• 12 years ago

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/

theg2• 12 years ago

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.

davidcelis• 12 years ago

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.

abimaelmartell• 12 years ago

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

selectnull• 12 years ago

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

BorisMelnik• 12 years ago

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.

antidaily• 12 years ago

Make an SVG option, please.

drdaeman• 12 years ago

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

graham-miln• 12 years ago

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

jamie_ly• 12 years ago

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

primitivesuave• 12 years ago

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.

dpe82• 12 years ago

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.

jammmuel• 12 years ago

Not to mention lack of alpha transparency.

jayyvis• 12 years ago

Nice utility to have !!!

bradgessler• 12 years ago

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.

marco1• 12 years ago

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

clark800• 12 years ago

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

chrismorgan• 12 years ago

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

ant_sz• 12 years ago

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

deluvas• 12 years ago

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

jhki• 12 years ago

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

mkesper• 12 years ago

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

Show HN: Font Awesome to PNG

Related Stories