TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Font Awesome to PNG

128 pointsby commanderjalmost 11 years ago

26 comments

sinakalmost 11 years ago
Somewhat relatedly: <a href="http://fontello.com" rel="nofollow">http:&#x2F;&#x2F;fontello.com</a>. 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.<p>There&#x27;s a great gem for using it with rails [1], a cli [2] and grunt task [2].<p>[1] <a href="https://github.com/railslove/fontello_rails_converter" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;railslove&#x2F;fontello_rails_converter</a><p>[2] <a href="https://github.com/paulyoung/fontello-cli" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;paulyoung&#x2F;fontello-cli</a><p>[3] <a href="https://github.com/jubalm/grunt-fontello" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jubalm&#x2F;grunt-fontello</a>
评论 #7806251 未加载
评论 #7805816 未加载
评论 #7807002 未加载
评论 #7807226 未加载
bradgessleralmost 11 years ago
If you haven&#x27;t already, check out <a href="http://fontcustom.com/" rel="nofollow">http:&#x2F;&#x2F;fontcustom.com&#x2F;</a>. 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:<p>- Sprockets asset pipeline integration <a href="https://github.com/glaszig/compass-fontcustom" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;glaszig&#x2F;compass-fontcustom</a><p>- A PNG sprite compiler for compatibility with IE8, Win7&#x2F;8 phones, and older versions of Android.<p>I can&#x27;t say enough good things about these projects.
areboursalmost 11 years ago
I&#x27;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.
selectnullalmost 11 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&#x27;t work on it, but if anyone finds it useful here&#x27;s a link:<p><a href="https://bitbucket.org/selectnull/awesome2png" rel="nofollow">https:&#x2F;&#x2F;bitbucket.org&#x2F;selectnull&#x2F;awesome2png</a>
ansimionescualmost 11 years ago
I&#x27;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?<p>0: <a href="http://stackoverflow.com/a/15503304" rel="nofollow">http:&#x2F;&#x2F;stackoverflow.com&#x2F;a&#x2F;15503304</a>
评论 #7805828 未加载
评论 #7806056 未加载
评论 #7805859 未加载
评论 #7805831 未加载
dlsymalmost 11 years ago
Really nice idea! There are often situations where a tool like this can come in handy.<p>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.
评论 #7805891 未加载
评论 #7806215 未加载
marco1almost 11 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&#x27;s 99% odyniec&#x27;s great script [2] and only 1% some trivial frontend&#x2F;collection for both projects. [1] <a href="https://github.com/delight-im/Font-Awesome-PNG" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;delight-im&#x2F;Font-Awesome-PNG</a> [2] <a href="https://github.com/odyniec/font-awesome-to-png" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;odyniec&#x2F;font-awesome-to-png</a>
theg2almost 11 years ago
This is great, but it&#x27;d be far better if I could put in multiple ones and get out a sprite sheet. I&#x27;ll take a look at the repo to see if this is possible.
jamie_lyalmost 11 years ago
Shameless plug:<p>This Android app I wrote serves the same purpose: <a href="https://play.google.com/store/apps/details?id=ly.jamie.fontawesomebrowser" rel="nofollow">https:&#x2F;&#x2F;play.google.com&#x2F;store&#x2F;apps&#x2F;details?id=ly.jamie.fonta...</a><p>Source: <a href="https://github.com/jamiely/Font-Awesome-Browser-Android" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jamiely&#x2F;Font-Awesome-Browser-Android</a>
mrchessalmost 11 years ago
Please do this with Entypo! I&#x27;ve been wanting to use their library forever, but it doesn&#x27;t work on some machines. <a href="http://www.entypo.com/" rel="nofollow">http:&#x2F;&#x2F;www.entypo.com&#x2F;</a>
ant_szalmost 11 years ago
I have written an OSX app to convert icons from any TTY font file to PNG or svg <a href="https://github.com/shanzi/iconfontr" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;shanzi&#x2F;iconfontr</a>
antidailyalmost 11 years ago
Make an SVG option, please.
评论 #7806393 未加载
patrickocoffeyoalmost 11 years ago
I would suggest using Grunticon as opposed to font awesome. <a href="https://github.com/filamentgroup/grunticon" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;filamentgroup&#x2F;grunticon</a>
iekadoualmost 11 years ago
I think using this will increase my mockup page speed a bit. Cool!
davidcelisalmost 11 years ago
Hoped to find the code on GitHub, but couldn&#x27;t. Any reason not to open source it? Seems like it would be an interesting codebase to take a quick look at.
评论 #7806017 未加载
primitivesuavealmost 11 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.<p>This seems better.
评论 #7806937 未加载
graham-milnalmost 11 years ago
I put together Font Pestle for this purpose: <a href="http://miln.eu/fontpestle/" rel="nofollow">http:&#x2F;&#x2F;miln.eu&#x2F;fontpestle&#x2F;</a>
jhkialmost 11 years ago
Or you can just use any imaginable icon set in IcoMoon, export the PNGs and color&#x2F;resize them in Photohop.
评论 #7809375 未加载
deluvasalmost 11 years ago
Aero just turned off when I opened up the icon list. Windows 7, Chrome 34.0.1847.131. Anybody else got that?
chrismorganalmost 11 years ago
A good demonstration of the usage of &lt;input list&gt; and &lt;datalist&gt;.
clark800almost 11 years ago
Awesome, I was actually looking for something to do this earlier today!
BorisMelnikalmost 11 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&#x2F;PNG.
jayyvisalmost 11 years ago
Nice utility to have !!!
huangc10almost 11 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.
SlAZ3almost 11 years ago
very cool!
mahmoudhossamalmost 11 years ago
fa2png is an unfortunate name for a project, really.
评论 #7806064 未加载