Font Awesome 2.0 - 70 new icons, desktop font, vectors, IE7 support | Hacker News Reader

Font Awesome 2.0 - 70 new icons, desktop font, vectors, IE7 support

fortawesome.github.com

168 pointsfortawesome27 comments

Issues with squished windows fonts have been fixed and pushed. Looks like it might have been an issue using Font Squirrel.

I noticed the update does not have a svgz font file, however the css references that file. Last version I had did have the svgz font file.

Missing all the characters altogether:

http://imgur.com/ByrB9

(Chrome 20.0.1132.21 on Mac OS X 10.7.3)

Any extra info in the script console?

Nope. After spending the morning digging (turns out no other web fonts would show up either) I discovered it was a corrupted OS X font cache.

Working for me on Chrome 20.0.1132.21 beta-m, Win 7, but very jagged aliased edges.

The icons look awful at small sizes

Chrome 19 is fine here on Mac OS X

Also Firefox 14 is fine on OS X 10.7.4

Update: there was actually a web font rendering issue on my machine. No web fonts would render at all.

Clearing the font cache as instructed here solved the problem.

http://surgeworks.com/blog/general/how-to-fix-chrome-for-mac...

Nice work, thank you so much for fontawesome!

I use them in every bootstrap project now; can't live without resizing and colouring my icons.

I hate this trend so much. I must say it feels like it "Breaks" the web. I use Gill Dyslexic[1] on all websites across the internet and I'm tired of having to put in exceptions for sites like github. Icons should be images.

[1]http://www.pixelscript.net/gilldyslexic/

I just upgraded. Is anyone else seeing the icons squished and less sharp than the previous version?

Yea, I noticed that when looking at the github demo.

The issue's been submitted and I'm looking into it. I suspect it might be a side-effect of using ttfautohint. What browser version and OS are you on?

Fonts are distorted for me too. Chrome 21.0.1155.2, Windows 7 x64: http://i.imgur.com/OZDLr.png

Thanks for the incredible work!

Apparently this was an issue with using Font Squirrel (!!). Fixing now.

Does anyone know if they actually have permission to include the logos of pInterest, LinkedIn, Facebook etc? Couldn't see anything in the article.

Aside from that, it's a nice collection which I could see finding a way into many of my projects.

Unfortunately, like most icon fonts, this looks like a blurry mess at 16x16px.

Yeah, but they look great on high ppi devices (new iPad, nexus one) even at 12px.

Is there anyone collecting all these great Bootstrap resources?

Minor nitpick, but the element used to add icons should be a <span>, or even better, a pseudo-element added via CSS.

You mean in place of <i>? That's what Bootstrap uses. Also the meaning of <i> has been shifted in HTML5 [0].

[0] http://stackoverflow.com/a/10001692/368409

Yes, but it still has a meaning, and it is not "icon". I think you can be pragmatic here and use <i>, since it to my knowledge doesn't cause any real world problem, but it's worth exploring other options.

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="i-icon" alt="Kitten">

    .i-icon {
      width: 32px;
      height: 32px;
      background-image: url(http://placekitten.com/32/32);
    }

The src is the data uri of a transparent gif. Screen readers will hear the alt text if you supply one. This will not work with font icons (img can't have ::before or ::after) but it should work fine for sprites or data uris in the CSS.

Awesome! going to use these in my side project now =)

Thank you for finally adding a feed icon!

Originally the desktop font was going to be part of a "commercial version"... the developer appears to have changed their mind?

Reply on news.ycombinator.com