Font Awesome 4 released | Hacker News Reader

Font Awesome 4 released

fontawesome.io

319 pointstrumbitta292 comments

Seems like a lot of people don't like the namespaces changes. I actually really like this! I suppose it's cumbersome even if you're building a project where you have full control. Then again - come on, we're talking about search&replace for 10 minutes here. And in more complex projects, you should have had a flexible function to handle icons anyways.

Why I really, really like it: If you're building something in a namespace polluted environment (say, a component for a popular CMS), this is a damn god-send.

I was on the fence before, from now on, it's fontawesome all the way for all my projects. They've done an amazing job so far and I'm looking forward to what they will do next.

It's also customizable in the LESS or SCSS as a variable. Want to go back to the icon-* prefix? No problem.

Well thanks for reminding me how profoundly lazy I am ;-)

And hey: Again, kudos!

Thanks for that foresight. I wasn't pleased about the namespace changes, but this makes it tolerable.

What I see on that page: one hell of a lot of unicode placeholders and not much else.

We don't all agree with a site's font choices.

And at least img made an attempt at semantic meaning and accessibility with alt= attributes. The failure modes for img are actually quite good. There's no such concern in the minds of those who gave birth to icon fonts.

Ligature symbols actually addresses this. there just aren't enough of them for my needs.

http://kudakurage.com/ligature_symbols/

They also aren't supported very well by browsers. IE8, in particular.

I must admit that's actually quite a cool solution.

I'm still not totally convinced by font abuse though.

Same here( "a lot of unicode placeholders" ). Can anyone clarify what would make these visible with Firefox 24 on Windows? (Same result for me with Iceweasel, but it's a few versions behind)

The site says JS is not required, and turning it on didn't help. FF 24 is just about the latest. What browser is this intended for?

Configure your NoScript options and uncheck "Forbid @font-face" (under Embeddings) and you are done.

370 icons is nice, but what i really want is a tool that lets me put together a smaller subset from multiple icon fonts that only has what my app needs. A global font-icon library from which to assemble this subset would be ideal.

These collections are trying to cater to everyone by growing in size when the better solution here is a modularizer.

http://icomoon.io/app

Thanks for reminding me about icomoon!

Icomoon is great, I've been using it for a while now. I find it's pretty easy to create my own icons in inkscape and then upload them to icomoon and add them to my custom icon font.

http://fontello.com/

What i would add to this: this tool has to be command-line tool. Ideally: declare the names of the icons you are using in some sort of a config file and build a font/svgs/images for all of them

They renamed the icons. They don't just break apps when they do that, they break users. At some point things like the names of icons should be frozen. I love Font Awesome of course. But please!

This is why it is a major release. It breaks compatibility for the sake of moving forward.

Could we not move forward without changing the namespace. Serious question.

No, they were changed for performance reasons which is a needed and important improvement:

https://github.com/FortAwesome/Font-Awesome/issues/568

My favorite rename is push-pin -> thumb-tack :-)

I'm sure that really improves performance.

Actually, it's because I originally matched the Glyphicons names. I was never crazy about them and they weren't terribly consistent. Tried to solve much of that in this version.

As much as I like having them for my projects (but I see no reason to get v4 instead of keeping v3), still no temperature (thermometer) nor sparklines (graph.)

I feel like this is outside of Font Awesome's remit.

I don't know why it is. A spark-like graph is useful for many use-cases (graph or bars? plot this, draw lines), and even more a thermometer-like icon (weather, medicine.) The thermometer has been hanging around the issues for a while also (or so I think from last time I checked.) I'd like to have all my icons in one basket, and I like the look of Font Awesome's. So missing these 2 is a little aesthetic pain.

Oh for heaven's sake, why is icon-* being deprecated? I stopped using Glyphicons because they switched to glyphion-* .

It's customizable in the LESS or SCSS.

That's quite good.

My guess is to avoid polluting the class namespace.

Correct. And it is customizable as a variable.

Oy I didn't see that. Oh man.

I can't tell you how happy I am they changed this. No more icon-* conflicts. I've had issues with duplicates with bootstrap's built-in when I only want certain icons to be glyphs, or if I want to create my own. I actually had to do an override where only objects with icon-* and a css class of font-icon would render from the font.

It'll take a little bit of work to update, but I definitely think it's better for compatibility-sake.

If you're looking for good looking icon fonts, don't forget to check out Entypo as well(http://entypo.com/). Not as many options as Font Awesome, but they do look really good/much better than other free alternatives or even paid ones.

Is this better than http://icomoon.io/app?

I can create my own font file with icomoon so it only contains the icons that I needed for my site. Only issue I have is that there is no way to save the created font file so that I can modify later.

It's different. Icomoon is brilliant for creating a preset group of icons which will be used in a predictable way. But sometimes, especially during prototyping, you don't know which icons you'll want. Just being able to include a pretty thorough library which renders consistently and gives you a decent level of control is a nice weight off your mind. It would be nice to have a subsetting tool, but imo that's what Icomoon's for.

Btw, you can save fonts in Icomoon - just click on the save icon in the bottom right and it'll save a settings json file which can be reimported.

I can save my settings in JSON but that is not ideal as I have to keep track of that. It would be better if site saves that on the server.

Then pay the $9/month?

http://icomoon.io/#premium

As far as I know they use the fontforge engine (as it is scriptable from the commandline) to drive icomoon, it is very easy to load the fontfile you created with icomoon into fontforge, load another instance of fontforge with a new fontfile created on icomoon and do copy/paste between them. Of course you can also load the original fontfiles that icomoon works with and use them into fontforge.

http://www.icnfnt.com lets you subset Font Awesome to just the icons you need. Based on v3.0.2 though.

I wish they post a link to the previous version's icons page, most of my websites are using font awesome v3, and I dont see a way to quickly find an old icon classes right now, unless somebody can help me out with that?

You can find it at http://fontawesome.io/3.2.1/

Great tip, is there a link on the current homepage? So that other people can also get a quick access to it?

I love Font Awesome though I do not understand why they have to claim "The iconic font designed for Bootstrap" --- I have managed to use Font Aweome with Zurb Foundation and SASS and it works just fine.

"Designed for" isn't "requires". It was designed to be compatible with Bootstrap, but that doesn't preclude it from playing nice with other frameworks.

Kind of brandjacking - but as it is free product I fail to see this as an ill behavior.

Fair enough. Originally there was quite a bit of CSS to get it to play nice with Bootstrap. Now, it should have more compatibility across the board with all frameworks.

Clever move - every framework has or will have support for Bootstrap and Font Awesome respectively. BTW Good job, I appreciate your effort.

Bootstrap is crazy popular and people know about it enough that they understand that "designed for Bootstrap" usually means "you can hack it to fit your stuff".

It was designed for Bootstrap in the sense that it originally served as a drop-in webfont replacement for the image-based icons in Bootstrap. Bootstrap had <i class="icon-bookmark">, and adding FontAwesome just made that render as a font glyph instead of an image with no extra work.

If you're like me and need access to the previous version's documentation, I'm hosting it at http://fontawesome.http410.com.

Thx, but it is also available http://fontawesome.io/3.2.1/

Awesome. Mind if I ask how you found that?

I couldn't find a link to this, so I just forked the gh-pages repo.

It's not called out directly, but it's linked to from here [1].

[1] http://fontawesome.io/get-started/

Seems kind of redundant [1].

[1] http://fontawesome.io/3.2.1/

There are ten new icons, but still no database icon :(

http://github.com/FortAwesome/Font-Awesome/issues/139

Anyone else having trouble with using the new 4.0 fonts from the Bootstrap CDN?

http://stackoverflow.com/questions/19549881/cdn-for-font-awe...

Looking into it.

https://github.com/FortAwesome/Font-Awesome/issues/2193

Url should be /fonts, not /font.

In variables.less, change @fa-font-path to: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts"

I whipped up a FontAwesome 4.0 library for iOS: https://github.com/sweetmandm/FontAwesomeTools-iOS

More speed? Looks to be from the following change:

https://github.com/FortAwesome/Font-Awesome/issues/568

Any others?

I hoped for more than 10 icons :-( Any advice on how to "add" some other SVG icons to the mix and generate the whole font package?

icomoon.io

It doesn't have the 10 new version 4 FA icons yet - but you can add any svg based icon you want, or any icon from one of the many other free sets they have.

Try http://icomoon.io/

You can upload your own (or others) fonts too. Use only the ones you need instead of adding the whole font to your project.

This update is about getting the CSS right. Cleaning it up, speeding it up, making it leaner. More icons in future versions.

Looking forward to it. Love FA.

Is this the best font-icon set? Would anyone consider using more than one in a project? Do you subset them?

I'm about to decide on one to use.

We use Font Awesome and have been incredibly happy. We augment the set with our own SVGs and appropriately attributed ones from The Noun Project. There are a variety of scripts and web sites available for packaging SVGs up so that they can be used as a font.

Try adding the 'fa-spin' class to any element type; entire <div>'s and <section>'s start spinning.

Good to see the Bitcoin icon making it in there.

In the what's new it says everything has been rewritten. Does this mean the icon vector files themselves or just the CSS?

Just the CSS.

Since icon names have changed, how do I find the documentation for the 3.x version?

I need access to the old docs too, so I decided to host them here:

http://fontawesome.http410.com/3.2.1/

You can also access it there: http://fontawesome.io/3.2.1/

No more '[class^="icon-"], [class*=" icon-"]'! Yay!

So FontAwesome 4 isn't backwards compatible, right?

I wonder how much faster it is.

We've been seeing as high as 30% in webkit. Hoping to write the findings up. It's especially hard as pretty much every browser has killed off their CSS profiler.

30% is great! Font Awesome is sooo sick.

Btw, is there a cheatsheet for those of us using FA3 still? Or are all the old icons interchangeable with "fa-" and "icon-"? Yes there is: http://fontawesome.io/3.2.1/

nice! to learn the new icon-names try our (font)awesome game http://fontawesome.pro

No IE7 support any more it seems.

v4 And this still not really Open Source.

Uh, what are you talking about?

I think they're referring to an article that made the rounds a few days ago (can't remember which) that decried the requirement of Adobe Illustrator for participation (citing as evidence the ratio of icon requests vs pull requests).

I tried taking designs from other folks. The quality wasn't good enough, so I stopped.

Ah, so the old "you don't like my pull request, so I will tell people you're not Open Source". Classic.

Some people apparently think "open source" means "anyone can commit whatever they like to the main repository", which is odd.

- Can't do pull requests on the graphics. - Can't download the svgs.

The only thing that is open source is the implementation.

Can't do pull requests on the graphics?

https://github.com/FortAwesome/Font-Awesome/pull/1823

Can't download the SVGs?

https://github.com/FortAwesome/Font-Awesome/blob/master/font...

What the heck? SIL OFL for the font, CSS etc is MIT, even the documentation is CC.

And history repeats itself.

A new generation of webdevelopers using Wingdings when designing pages in Microsoft Frontpage.... sigh.

Except it isn't required to have the font installed on _your_ system this time around.

Reply on news.ycombinator.com