
Show HN: Font Awesome to PNG - commanderj
http://fa2png.io/
======
sinak
Somewhat relatedly: [http://fontello.com](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](https://github.com/railslove/fontello_rails_converter)

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

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

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

~~~
rblatz
What does that buy you that using something like gulp-iconfont
[https://github.com/nfroidure/gulp-
iconfont](https://github.com/nfroidure/gulp-iconfont) doesn't?

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

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

------
bradgessler
If you haven't already, check out
[http://fontcustom.com/](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](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.

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

------
selectnull
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](https://bitbucket.org/selectnull/awesome2png)

------
ansimionescu
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](http://stackoverflow.com/a/15503304)

~~~
23andwalnut
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.

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

------
marco1
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](https://github.com/delight-im/Font-Awesome-PNG) [2]
[https://github.com/odyniec/font-awesome-to-
png](https://github.com/odyniec/font-awesome-to-png)

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

------
jamie_ly
Shameless plug:

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

Source: [https://github.com/jamiely/Font-Awesome-Browser-
Android](https://github.com/jamiely/Font-Awesome-Browser-Android)

------
mrchess
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/](http://www.entypo.com/)

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

------
antidaily
Make an SVG option, please.

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

------
patrickocoffeyo
I would suggest using Grunticon as opposed to font awesome.
[https://github.com/filamentgroup/grunticon](https://github.com/filamentgroup/grunticon)

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

------
davidcelis
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
[https://github.com/odyniec/font-awesome-to-
png/blob/master/f...](https://github.com/odyniec/font-awesome-to-
png/blob/master/font-awesome-to-png.py)

------
primitivesuave
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
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
Not to mention lack of alpha transparency.

------
graham-miln
I put together Font Pestle for this purpose:
[http://miln.eu/fontpestle/](http://miln.eu/fontpestle/)

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

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

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

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

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

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

------
jayyvis
Nice utility to have !!!

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

------
SlAZ3
very cool!

------
mahmoudhossam
fa2png is an unfortunate name for a project, really.

~~~
coldtea
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
If I had to guess, maybe it looks a bit like the word "fapping"?

~~~
thatthatis
It is far enough away to be a rorschach test

