Settings

Theme

Show HN: Font Awesome to PNG

fa2png.io

128 points by commanderj · 51 comments

Reader

26 threads
sinak

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

  • cobalt

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

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

  • sp332

    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

    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

      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/

bradgessler

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.

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

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

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

  • michaelbuckbee

    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

  • hsnim

    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.

  • iekadou

    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.

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!

  • mnx

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

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 [2] 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...

Source: 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/

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

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

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.

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.

graham-miln

I put together Font Pestle for this purpose: 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.

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

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection