HN Explorer

28 comments

[ 5.9 ms ] story [ 72.2 ms ] thread
smcguinness
I just upgraded. Is anyone else seeing the icons squished and less sharp than the previous version?
TenJack
Yea, I noticed that when looking at the github demo.
fortawesome
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?
fortawesome
Apparently this was an issue with using Font Squirrel (!!). Fixing now.
ben1040
Missing all the characters altogether:

http://imgur.com/ByrB9

(Chrome 20.0.1132.21 on Mac OS X 10.7.3)

voltagex_
Any extra info in the script console?
ben1040
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.
jtreminio
Working for me on Chrome 20.0.1132.21 beta-m, Win 7, but very jagged aliased edges.
lloeki
Chrome 19 is fine here on Mac OS X
fceccon
Also Firefox 14 is fine on OS X 10.7.4
fortawesome
Issues with squished windows fonts have been fixed and pushed. Looks like it might have been an issue using Font Squirrel.
smcguinness
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.
ra
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.

[deleted]
(comment deleted)
syassami
Awesome! going to use these in my side project now =)
illicium
Unfortunately, like most icon fonts, this looks like a blurry mess at 16x16px.
mgcross
Yeah, but they look great on high ppi devices (new iPad, nexus one) even at 12px.
arkitaip
Is there anyone collecting all these great Bootstrap resources?
panacea
Originally the desktop font was going to be part of a "commercial version"... the developer appears to have changed their mind?
ricardobeat
Minor nitpick, but the element used to add icons should be a <span>, or even better, a pseudo-element added via CSS.
lloeki
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

jacobr
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.
dan1234
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.

jacobr
Thank you for finally adding a feed icon!
uncoder0
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/