7 ms·

Show HN: Font Awesome to PNG

128 points by commanderj 12y ago

SlAZ3 12y ago
very cool!
BorisMelnik 12y 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.
huangc10 12y 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 12y 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.
iekadou 12y ago
I think using this will increase my mockup page speed a bit. Cool!
sinak 12y ago
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 12y 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.
  - rblatz 12y ago
    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 12y ago
      That project doesn't seem to integrate with Fontello at all.
      - rblatz 12y ago
        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.
- cobalt 12y ago
  I personally prefer IcoMoon which generally has a lot more options and their font builder (for custom glyphs) works much better.
- sp332 12y 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=JAVSCRIPT https://fonts.googleapis.com/css?family=Creepster&text=JAVSC...
- etler 12y 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.
ansimionescu 12y 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 http://stackoverflow.com/a/15503304
- 23andwalnut 12y 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.
  - deleted 12y ago
    [deleted]
  - criswell 12y ago
    A few more things not listed here... * You can change the color instantly (color) * You can add a drop shadow easily as well (text-shadow)
- iekadou 12y 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 12y 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.
dlsym 12y 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 12y 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 12y ago
  It's just a single-purpose little hack, not a product, let the author have his fun.
mahmoudhossam 12y ago
fa2png is an unfortunate name for a project, really.
- coldtea 12y 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 12y ago
    If I had to guess, maybe it looks a bit like the word "fapping"?
    - thatthatis 12y ago
      It is far enough away to be a rorschach test
patrickocoffeyo 12y ago
I would suggest using Grunticon as opposed to font awesome. https://github.com/filamentgroup/grunticon https://github.com/filamentgroup/grunticon
mrchess 12y 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/ http://www.entypo.com/
theg2 12y 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 12y 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 12y ago
  https://github.com/odyniec/font-awesome-to-png/blob/master/font-awesome-to-png.py https://github.com/odyniec/font-awesome-to-png/blob/master/f...
af3 12y ago
Does anyone know Font Awesome to tikzpicture converter?
selectnull 12y 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 https://bitbucket.org/selectnull/awesome2png
antidaily 12y ago
Make an SVG option, please.
- drdaeman 12y 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 12y ago
I put together Font Pestle for this purpose: http://miln.eu/fontpestle/ http://miln.eu/fontpestle/
jamie_ly 12y ago
Shameless plug: This Android app I wrote serves the same purpose: https://play.google.com/store/apps/details?id=ly.jamie.fontawesomebrowser https://play.google.com/store/apps/details?id=ly.jamie.fonta... Source: https://github.com/jamiely/Font-Awesome-Browser-Android https://github.com/jamiely/Font-Awesome-Browser-Android
primitivesuave 12y 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 12y 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 12y ago
    Not to mention lack of alpha transparency.
jayyvis 12y ago
Nice utility to have !!!
bradgessler 12y ago
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.
ant_sz 12y ago
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
marco1 12y 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 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
clark800 12y ago
Awesome, I was actually looking for something to do this earlier today!
chrismorgan 12y ago
A good demonstration of the usage of <input list> and <datalist>.
deluvas 12y ago
Aero just turned off when I opened up the icon list. Windows 7, Chrome 34.0.1847.131. Anybody else got that?
jhki 12y ago
Or you can just use any imaginable icon set in IcoMoon, export the PNGs and color/resize them in Photohop.
- mkesper 12y ago
  Resizing PNGs? Works only reasonable if you make them smaller...

128 points by commanderj 12y ago

SlAZ3 12y ago

very cool!

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.

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

iekadou 12y ago

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

sinak 12y ago

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 12y 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.
- rblatz 12y ago
  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 12y ago
    That project doesn't seem to integrate with Fontello at all.
    - rblatz 12y ago
      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.
cobalt 12y ago
I personally prefer IcoMoon which generally has a lot more options and their font builder (for custom glyphs) works much better.
sp332 12y 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=JAVSCRIPT https://fonts.googleapis.com/css?family=Creepster&text=JAVSC...
etler 12y 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.

ansimionescu 12y 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 http://stackoverflow.com/a/15503304

23andwalnut 12y 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.
- deleted 12y ago
  [deleted]
- criswell 12y ago
  A few more things not listed here... * You can change the color instantly (color) * You can add a drop shadow easily as well (text-shadow)
iekadou 12y 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 12y 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.

dlsym 12y 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 12y 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 12y ago
It's just a single-purpose little hack, not a product, let the author have his fun.

mahmoudhossam 12y ago

fa2png is an unfortunate name for a project, really.

coldtea 12y 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 12y ago
  If I had to guess, maybe it looks a bit like the word "fapping"?
  - thatthatis 12y ago
    It is far enough away to be a rorschach test

patrickocoffeyo 12y ago

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

mrchess 12y 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/ http://www.entypo.com/

theg2 12y 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 12y 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 12y ago
https://github.com/odyniec/font-awesome-to-png/blob/master/font-awesome-to-png.py https://github.com/odyniec/font-awesome-to-png/blob/master/f...

af3 12y ago

Does anyone know Font Awesome to tikzpicture converter?

selectnull 12y 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 https://bitbucket.org/selectnull/awesome2png

antidaily 12y ago

Make an SVG option, please.

drdaeman 12y 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 12y ago

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

jamie_ly 12y ago

Shameless plug: This Android app I wrote serves the same purpose: https://play.google.com/store/apps/details?id=ly.jamie.fontawesomebrowser https://play.google.com/store/apps/details?id=ly.jamie.fonta... Source: https://github.com/jamiely/Font-Awesome-Browser-Android https://github.com/jamiely/Font-Awesome-Browser-Android

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

jayyvis 12y ago

Nice utility to have !!!

bradgessler 12y ago

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.

ant_sz 12y ago

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

marco1 12y 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 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

clark800 12y ago

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

chrismorgan 12y ago

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

deluvas 12y ago

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

jhki 12y ago

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

mkesper 12y ago
Resizing PNGs? Works only reasonable if you make them smaller...