johnsmclay / icnfnt

Many of Grant and Clay's clients wanted to use the fantastic FontAwesome Icon Font, but didn't want to make their users download more icons than necessary. Icnfnt was originally a weekend project built to solve this problem. Since it worked so well, Grant and Clay decided to put it online for anyone to use. Built with Angular.js, Bootstrap, Flask, FontForge, and lots of pizza.
179 stars 24 forks source link

Generated font pack doesn't display correctly in Chrome #5

Open mlms13 opened 11 years ago

mlms13 commented 11 years ago

Using the generator at icnfnt.com, some characters in the resulting font files don't display correctly in Chrome (tested in 23 and 26.0.1378.2). This is the case with both the WOFF and the TTF files, and it only happens in Chrome. Everything still works correctly in Firefox, IE9, and IE10.

I thought this may be an issue on my end, or an issue with Chrome, but when I replace the generated font files with the original, complete fonts, the symbols display correctly.

I'm attaching a screenshot of an unmodified icon-reference.html. Let me know if I can provide any other information that would be useful. fonts

mlms13 commented 11 years ago

Further testing shows that this issue is specific to Chrome on Windows. The same versions of Chrome seem to work fine on Ubuntu 12.04 and OS X 10.8.

d9media commented 11 years ago

Same issue on Opera (Windows).

grantgordon commented 11 years ago

Thanks for reporting the issue, guys!

Quick followup question: does this happen the first time you generate a font, or only after you generate one, go back and change things, and then generate another?

DotDotJames commented 11 years ago

confirmed - same issue - icons downloaded: .icon-search:before { content: "\f002"; } .icon-home:before { content: "\f015"; } .icon-remove-sign:before { content: "\f057"; } .icon-question-sign:before { content: "\f059"; } .icon-info-sign:before { content: "\f05a"; } .icon-random:before { content: "\f074"; }

where these icons weren't rendered properly &/or at all: .icon-search:before { content: "\f002"; } .icon-home:before { content: "\f015"; } .icon-remove-sign:before { content: "\f057"; }

grantgordon commented 11 years ago

I've also confirmed the problem personally, now.

These get 'fi' and 'fl,' respectively: .icon-music .icon-search

These are just blank: .icon-glass .icon-envelope .icon-heart .icon-star .icon-star-empty .icon-user .icon-film .icon-th-large .icon-th .icon-th-list .icon-ok .icon-remove .icon-zoom-in .icon-zoom-out .icon-off .icon-signal .icon-cog .icon-trash .icon-home .icon-file .icon-time .icon-road .icon-download-alt .icon-download .icon-upload .icon-inbox .icon-play-circle .icon-repeat .icon-double-angle-left .icon-double-angle-right .icon-double-angle-up .icon-double-angle-down .icon-angle-left .icon-angle-right .icon-angle-up .icon-angle-down .icon-desktop .icon-laptop .icon-tablet .icon-mobile-phone .icon-circle-blank .icon-quote-left .icon-quote-right .icon-spinner .icon-circle .icon-reply .icon-github-alt .icon-folder-close-alt .icon-folder-open-alt

It must be an issue with the generated woff file. I don't have time to troubleshoot any farther right this minute -- if anyone wants to take a stab at playing with the woff export feel free. I'll try to hit it later.

grantgordon commented 11 years ago

Just upgraded to 3.0.2 and that didn't seem to fix it. Will look into the woff angle.

grantgordon commented 11 years ago

After much plumbing the depths of fontforge I believe I have found a fix. I should have it integrated and deployed in the next day or two.

grantgordon commented 11 years ago

Alrighty! It's pushed and deployed. Care to give it a try and confirm that it's fixed for you?

tagliala commented 11 years ago

Hi,

the issue is fixed, I got all the icon requested in chrome / windows 7 too

but... Icons look different, they are not perfectly antialiased and a little bit bigger (both on chrome and firefox):

nuovo-3

pixel perfection is lost :(

Anyway I have a couple of extra question not related to this issue

1) why is the codification different? I mean, in my css I need to use `content: "\fxxx". With a customized set of icons, content is different and this break up things

2) can we have icons sorted by name and a visible name? It's hard to find the icons needed. If there is a name, we can simply CTRL/CMD+F and enter the name

Sorry for my English

grantgordon commented 11 years ago

Ugh. I thought I had that issue fixed. I'll look into it.

The codification changed because whole swaths of the old address blocks were suddenly unusable in chrome for windows after trimming the original font file. Generating new ones seemed to fix the issue for now, but I'll see if I can find a workaround.

tagliala commented 11 years ago

Thanks

btw, about "issue" number 2, for those interested, here is a workaround until we can have a feature to import settings

$("li.selected[data-original-title]").click()
var icons = 'heart star user ok remove cog time list-alt plus-sign question-sign gift warning-sign random bar-chart signout github link copy magic undo exchange'.split(' ');
for (i = 0, l = icons.length; i < l; ++i) { $("li[data-original-title='.icon-" + icons[i] + "']").click() }

just put in icons variable the icons you need (without icon- prefix) space separated and run this script from chrome/firebug console