Font Awesome 4.0.1 -- IE8 needs a font url fix

[kloudsamurai]

This one should be real simple to fix. By default fonts aren't rendering on IE8. There is a little tweak needed to the #iefix url:

../fonts/fontawesome-webfont.eot?#iefix&v=4.0.1

should be:

../fonts/fontawesome-webfont.eot?v=4.0.1#iefix

I can create a pull request if that's helpful. Thanks!

[tagliala]

Sorry, can't confirm

[kloudsamurai]

Sorry I should have been more explicit -- it does work fine on your server. I think it's a server specific issue with parsing invalid urls. If you review the url format though -- that's not technically formatted properly. I think the update suggested would fix the url for server frameworks that use url validation mechanisms.

[tagliala]

I think it's a server specific issue with parsing invalid urls. If you review the url format though -- that's not technically formatted properly.

I think this should be done, reopening

[tagliala]

@davemaple

please wait for a pull request, there is still no proper branch to push against

glyphicons have the same issue, right? You could consider to make a pull request to bootstrap too

[tagliala]

@davemaple can you please also check that this change will not affect IE9 and IE10 ?

[kloudsamurai]

yes. testing now.

[kloudsamurai]

works fine in both IE9 and IE10.

[tagliala]

Fine, thanks!

If you see the 4.0.2-w.i.p. branch before me, feel free to make the pull request against that branch

Files that needs this patch are:

https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/scss/_path.scss#L7 and https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/less/path.less#L7

(the ones in /less and /scss folders are automatically generated)

PS: Glyphicons should not be affected, since there is no version number

[davegandy]

I'll fold this into 4.0.2 right now. No need for a PR. Thanks as always, @tagliala.

[kloudsamurai]

Thanks Dave!

[davegandy]

Added into 4.0.2-wip.

[bbodenmiller]

Still broken for me on IE8 and 9 on Windows 7 using multiple different systems:

[kloudsamurai]

Confirmed. I'm not sure why it works for me using playframework but I can
see it's not working on the site. I guess the invalid url hack is needed
per this SO post:

http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8

On Mon, Nov 4, 2013 at 7:30 PM, Ben Bodenmiller notifications@github.comwrote:

Still broken for me on IE8 and 9 on Windows 7 using multiple different
systems:

[image: ie8]https://f.cloud.github.com/assets/1192780/1470131/2a78f2ac-45b1-11e3-9bc5-c945e464ebf5.PNG

[image: ie9]https://f.cloud.github.com/assets/1192780/1470133/324bc888-45b1-11e3-8924-fbb884d2d980.PNG

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2324#issuecomment-27737094
.

Respectfully,

David Maple
Website Awesomization Consultant
(207) 370-8323
d@davemaple.com
http://davemaple.com/ http://davemaple.com/contact/
Skype: dave.maple

This email and any files transmitted with it are confidential and intended
solely for the use of the individual or entity to whom they are addressed.
If you have received this email in error please notify the system manager.
This message contains confidential information and is intended only for the
individual named. If you are not the named addressee you should not
disseminate, distribute or copy this e-mail. Please notify the sender
immediately by e-mail if you have received this e-mail by mistake and
delete this e-mail from your system. If you are not the intended recipient
you are notified that disclosing, copying, distributing or taking any
action in reliance on the contents of this information is strictly
prohibited.

[kloudsamurai]

It is working for me here though in both IE8 and IE9 ...
https://www.ajmoss.com/secure-payment

I'm not seeing what the syntactical difference is.

[kloudsamurai]

Regardless ... I've broken the build for you guys :( and this needs to get reverted. All apologies.

[kloudsamurai]

Oh man I'm really sorry. Having read the SO post more carefully I see why now. Playframework automatically minifies all the CSS so the whole font declaration is on one line. Consequently the very presence of the ? causes IE to stop parsing the rest of the declaration. In a non-minified version the url hack is still needed.

[tagliala]

@davemaple We could document this in our troubleshooting guide

Can you please edit this wiki: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting reporting your experience and what to do?

[kloudsamurai]

Definitely. Let me spend a little more time tracking down the exact nature of the issue as experienced on Playframework and then I'll add an entry. Again, my apologies for breaking your build.

[tagliala]

@davemaple don't worry too much, (sh)it happens!

Since that url is not valid (I'm reading here: http://tools.ietf.org/html/std66)

URI = scheme ":" hier-part [ "?" query ] [ "#" fragment ]

We can blame someone else :)

[bbodenmiller]

I still can't get the icons to load in IE8 in certain enterprise configurations. Any idea what setting may be preventing this?

[tagliala]

@bbodenmiller what did you try?

mime types? proper url?

[kloudsamurai]

Check the Content-Type header when requesting the .eot font directly and verify that your server is returning application/vnd.ms-fontobject or application/octet-stream. Those both seem to work for me.

[bbodenmiller]

Appears this is a result of IEs settings being configured to block font downloading. Anyone get font-awesome working with typeface.js, cufon.js, or any other JavaScript methods of downloading the font?

[ehoffman73]

I am in the same boat with font downloading being blocked. I have looked at this with not a lot of success yet, has anyone else in this situation?

http://stackoverflow.com/questions/7973421/detect-if-font-download-in-ie-is-enabled

[coffebar]

Still broken on IE8 :'(

[JoshSchreuder]

This issue could be down to security settings in IE8 for font download:

If you set it to disable, you'll get squares. If enable then it renders correctly. Prompt pops up a box saying this website needs to install fonts, and this is usually safe, asking yes or no.

This might be in place as a security policy as sometimes font rendering can be used as a remote code execution vector.

[bbodenmiller]

That was my issue but unfortunately I cannot change the IE security settings for the whole company. Supposedly one can load Font-Awesome via js but I haven't got it working yet.

[JoshSchreuder]

@bbodenmiller that would be handy. Do you have a link to how to do this?

[ehoffman73]

That's exactly what I have been trying to figure out too. I got to where you can check if you can download the font, and if not, use the images we made as replacements. But that sucks.

Would like to figure out how to load via ajax/js.

From: Josh Schreuder <notifications@github.commailto:notifications@github.com>
Reply-To: FortAwesome/Font-Awesome <reply@reply.github.commailto:reply@reply.github.com>
Date: Monday, February 10, 2014 at 5:52 PM
To: FortAwesome/Font-Awesome <Font-Awesome@noreply.github.commailto:Font-Awesome@noreply.github.com>
Cc: Eric Hoffman <ehoffman@dscxn.commailto:ehoffman@dscxn.com>
Subject: Re: [Font-Awesome] Font Awesome 4.0.1 -- IE8 needs a font url fix (#2324)

@bbodenmillerhttps://github.com/bbodenmiller that would be handy. Do you have a link to how to do this?

Reply to this email directly or view it on GitHubhttps://github.com//issues/2324#issuecomment-34708614.

[mccarley]

@ehoffman73 @bbodenmiller Same situation here -- Any luck with finding a script to load Font-Awesome via ajax/js? - Thanks

[tagliala]

#2324 (comment)

Oh man I'm really sorry. Having read the SO post more carefully I see why now. Playframework automatically minifies all the CSS so the whole font declaration is on one line. Consequently the very presence of the ? causes IE to stop parsing the rest of the declaration. In a non-minified version the url hack is still needed.

Please open a new issue, this one is about that particular framework

[cefigueiredo]

Hi guys, I know that this issue was closed, but I had the same problem on IE8 for Font-Awesome 4.0.3, and I just want to share the workaround I used.

I just added the html5.js script on my project

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I saw that solution somewhere for another font library and saw that it was used on the homepage for FontAwesome 3.2.1 and didn't see that workaround neither on Troubleshooting

[tagliala]

@cefigueiredo thanks for sharing this, but IE8 has random issues with :before pseudoelements.

I was "lucky" enough to reproduce the bug on the following website: http://tagliala.github.io/vectoriconsroundup/ which, as you can see here: https://github.com/tagliala/vectoriconsroundup/blob/gh-pages/index.html#L90, includes that script

[drKnoxy]

still has a weird bug, even with the html5.js addition.

1. go to fontawesome.io
2. hit the reload icon in the browser
3. boxes everywhere

[tagliala]

@drKnoxy sorry but this is a random issue with IE8 and pseudo elements and we can't fix this.

[Showtimes]

Was there any resolution with this? I've tried just about everything and still can't get the icons to show up on IE 8.

[tagliala]

@Showtimes IE8 works.

There are random issues with pseudo elements, but there is not a fix and they are random. If you can't see icons at all, there is a problem with your configuration.

PS: this thread is about an url fix that we had to revert. If anyone is concerned about IE8 please open new issues. Probably we need to document this random stuff about IE8

[jonwolfe]

@tagliala , this isn't just a random issue, it is a real one, and it does show up even without IE configured to block font downloads, and with the proper tags to force IE8 out of Compatibility Mode.

For what it's worth, this is what worked for me: http://stackoverflow.com/a/10557782

I think it should be in the troubleshooting wiki.

[kunjbiharipandey]

if we are using
../font-awesome-4.1.0/font-awesome-4.1.0/css/font-awesome.css
the icons are not working so can any one help me out please

[kunjbiharipandey]

@davemaple please if u can have any suggestions

[tagliala]

@kunjbiharipandey you should consider stackoverflow for support request.

Please also take a look at our troubleshooting guide: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

If you think there is a bug with fontawesome, please open a new request providing a fiddle showing the issue

[tagliala]

Locking here, this change was reverted in FA 4.0.3 via e07edeb because of #2324 (comment)