On IE8, font disapear when refresh #954

FabGre · 2013-04-15T11:53:52Z

EDIT : Just see that there is an other bug about display on IE (#929) but I'm not sure it's the same 'cause the tweak seems to be on the source code..

Hello,

Sorry but I have to report a bug on IE 8 (argh). The users of my application are not experimented internet guys and could still use XP/IE 8 ..

So, I saw that when I simple refresh my app, fonts disapear randomly. I checked on fontAwesome website and it's the same, with a strange behaviour on hover. When I hard refresh (CRTL+R) or clear the cache, fonts come back. I let you see my different screenshots.

tagliala · 2013-05-21T21:03:48Z

Hi, we never experienced this issue with IE8. Did you check other machines? Can you please check FA 3.1.1 and let me know if everything is fine?

tagliala · 2013-06-06T12:15:23Z

closing, no feedback here

andparsons · 2013-06-11T15:10:34Z

I found I also had this problem with IE8 on XP with 3.1.1.
When defining the icons via unicode () rather than by class, the problem didn't occur.

ecowden · 2013-06-14T19:41:09Z

We can also confirm that this is an issue.

Here's a screen shot of the Font Awesome page as of Jun 14th, 2013, v3.2.0:

tagliala · 2013-06-15T10:30:49Z

reopening but since it's random, it's hard to reproduce by me

FabGre · 2013-06-17T06:47:50Z

Sorry I had no time to answer before. We reproduce on every VM XP created on our machines (VM found here http://www.modern.ie/en-us/virtualization-tools)

tagliala · 2013-06-17T08:13:17Z

I will take another look. Anyway I'm also using a virtual machine

tagliala · 2013-06-17T13:56:30Z

confirm. Sometimes right click is enough to get icons back.

Are you able to reproduce it here: http://tagliala.github.io/vectoriconsroundup/

If yes, please check that other webicons are not working.

tagliala · 2013-06-17T13:57:48Z

Tried 20-25 times without any success. I suspect some javascript stuff (my roundup is not using jquery and there is a javascript error on IE8). Let me up to date

FabGre · 2013-06-17T14:26:07Z

I reproduced the first time on http://tagliala.github.io/vectoriconsroundup/, only in the ELS column. Then all icons were alright when I refreshed (even when I deleted the cache files !). I tried ~10 times.

Hope it helps.

ecowden · 2013-06-18T14:59:46Z

The icons on http://tagliala.github.io/vectoriconsroundup/ don't show up for me at all. Looks like the JavaScript errors probably have something to do with it, though.

tagliala · 2013-06-18T18:59:47Z

I could setup for sure a page without javascript

Anyway, since ELS and Glyphicons have nothing to do with FontAwesome, can we say that this is a browser bug?

Any IE8 guru here?

tagliala · 2013-07-05T11:09:25Z

any news about this one?

fatcrobat · 2013-07-26T08:45:43Z

I can confirm this, as a workaround i downgraded font-awesome to Version 3.0.2.

tagliala · 2013-07-26T11:47:53Z

@fatcrobat there are no issues with 3.0.2 ?

fatcrobat · 2013-07-26T19:11:50Z

none mentioned yet

tagliala · 2013-07-26T20:01:55Z

Even if I'm sometime able to reproduce this, today I tried several times (at least 50) on my roundup page and I wasn't able to reproduce. http://tagliala.github.io/vectoriconsroundup/

PS: if also glyphicons and elusive icons don't show, it isn't a fontawesome bug.

shapeshifta78 · 2013-09-23T18:16:47Z

Apparently, IE8 dislikes using webfonts in pseudoelements. I had the same issues with my own iconfont.
The only workaround I found so far is to trigger an invisible style change on these elements after the page has loaded. Sth. like this: http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes

nicodiaz · 2013-10-29T04:55:45Z

Hi,

I have the same issue. The downgrade to 3.x.x by @fatcrobat didn't work for me. Neither the JS on dom ready, proposed be @shapeshifta78

I don't post screenshots because are the same as the initial screens by @FabGre

I can reproduced the bug by refreshing many times (~10-15) IE8 with the following code (bootstrap 3.0.0 AF 4.x.x):

<html>
<head>

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />

<script src="/js/vendor/jquery-1.10.1.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>


</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <section>
                    <h2><i class="fa fa-wrench"></i>Wrench</h2>

                    <p>...</p>
                </section>
            </div> 
        </div> <!-- /ROW -->
    </div> <!-- /CONTAINER -->
    <script src="/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js" ></script>
</body>
</html>

xzyfer · 2013-11-14T12:43:17Z

Can confirm this happens in IE8 in the github page. Issue is not isolated to font awesome as I've experience this with my own icon font. Doesn't always happen. When it does, hovering over an icon generally makes it appear.

I believe it may be an issue with the browser not repainting once the icon font has been loaded.

RKS213 · 2013-11-30T06:21:06Z

I don't get these issues with 3.x. I first tried 4.0 today and immediately see this issue. The FA website is completely broken using VM on Mac, IE8, Windows 7. It's all I tried.

tagliala · 2013-11-30T12:47:18Z

@RKS213 thanks for the extra information.

I'm testing IE8 only with windows xp and it works most of the times (there are random issues).

I don't know if IE8 should be also be supported on windows 7, since IE11 comes as an automatic update, I will ask Dave

RKS213 · 2013-11-30T14:58:27Z

I didn't even know IE11 was out already...lol. By automatic update do you mean it forces users to update? Or there's still an option to decline at prompt? I don't support XP anymore, so if that's the only remaining issue than I can live with FA not support Win7/IE8 if they're being forced to update. Thanks for the information.

cbirdsong · 2013-12-24T17:02:06Z

Fixed this by including a second @font-face declaration, as per the first answer here: http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes

I have no idea why this works, but it does on all the sites I've tried it on.

tagliala · 2013-12-24T17:07:44Z

@cbirdsong thanks forma sharing but that solution is linked to a post saying:

UPDATE: The IE8 Icon Fonts Fix allow to display icons in IE8 (which is impossible with current icon.css file), butoccasionally the browser will not load the font (this happens especially when a page loads quickly, in the member menu, and sometimes in the administration pages). Seems to be a problem of IE8, but I hope it can be bypassed by the BoonEx team or any member of the community.

charliematters · 2014-03-25T20:50:27Z

Is there any advice on this? I am using IE8 and have had no luck in getting icons to show ever. Testing on BrowserStack shows that the FontAwesome 3.2.1 webpage doesn't display any of the icons.

I have tried all of the fixes that Google turned up, including changing the MIME type, and adding the ?#iefix line to the font-face url.

RKS213 · 2014-03-25T20:54:39Z

You cannot use the 4.0 version. You need to use 3. It sucks because not all the icons are on 3 but only 3 works with IE8 and below. There are a few things about 3 that are even better than 4 and I like the code better. I don’t know why he fundamentally changed his code for 4 and it sucks, but that’s what you have to do if you want to support IE8 and below.

On Mar 25, 2014, at 3:50 PM, charliematters notifications@github.com wrote:

Is there any advice on this? I am using IE8 and have had no luck in getting icons to show ever. Testing on BrowserStack shows that the FontAwesome 3.2.1 webpage doesn't display any of the icons.

I have tried all of the fixes that Google turned up, including changing the MIME type, and adding the ?#iefix line to the font-face url.

—
Reply to this email directly or view it on GitHub.

charliematters · 2014-03-25T21:05:22Z

Sorry, perhaps I should have been more clear - I'd love to use 4, but I'm also perfectly happy with 3 (in Firefox and Chrome)!

FontAwesome 3.2.1 does not appear to support IE8 at all - unless I'm doing something very wrong?

tagliala · 2014-03-25T21:11:48Z

FA 3.x.x and 4.0.x work with IE8

IE8 has random problems with before tags, but this is not FontAwesome's fault and there is not a clean workaround we can use.

If you are not able to make FA work at all, please check your server configuration or use the cdn: http://fontawesome.io/get-started/

edit: please also take a look here: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

charliematters · 2014-03-25T21:17:27Z

Thanks for the reply. Unfortunately I am developing for a system which does not have internet access. I will try and copy the files across again.

Does it mean anything that I cannot get the FontAwesome website (http://fortawesome.github.io/Font-Awesome/3.2.1/) to work using the IE8 VM mentioned above by FabGre ? The symptoms are identical i.e rectangular boxes wherever icons would be expected.

charliematters · 2014-03-25T21:19:37Z

PS. I'll also try the troubleshooting methods you mentioned as well!

tagliala · 2014-03-25T21:25:34Z

@charliematters take a look here: #2324

Let me know if it helps

charliematters · 2014-03-25T21:43:39Z

Thanks tagliala, that looks really useful and is exactly what I'm getting. The IE security settings sounds extremely likely!

tagliala · 2014-03-26T09:55:30Z

you're welcome. let me know if it fixes so I can improve the troubleshooting guide

drKnoxy · 2014-05-20T17:11:47Z

bummer, hitting the same issue

tagliala · 2014-05-20T17:57:56Z

@drKnoxy can't fix this

amitabhaghosh197 · 2014-06-20T11:26:50Z

I was also having this problem with 4.1.0. Also applied all the css hacks and js to get solved. But without any hope. Ultimately I applied 3.2.1. and <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

and finally it got solved.

rjgotten · 2014-12-03T14:23:34Z

Regarding the previous advice given by @shapeshifta78 :

Apparently, IE8 dislikes using webfonts in pseudoelements. I had the same issues with my own iconfont.
The only workaround I found so far is to trigger an invisible style change on these elements after the page has loaded.

IE8 has one more problem with pseudo-elements and rerunning layout and paint; it tends to skip doing so unless the content CSS property is changed.

Anyone that is still having issues with font icons not properly displaying after the font-face has finished loading, could try something that explicitly toggles the content property, like:

<style>
  html.ie-force-pseudo-refresh :before,
  html.ie-force-pseudo-refresh :after {
    content : none !important;
  }
</style>
<script>
  if ( window.attachEvent && !window.addEventListener ) { // <-- Poor man's IE8 detection
    window.attachEvent( "onload", function() {
      var
        html = document.documentElement,
        clss = html.className;

      html.className = clss + " ie-force-pseudo-refresh";
      setTimeout( function(){ html.className = clss; }, 10 );
    });
  }
</script>

tagliala · 2014-12-03T15:48:53Z

@rjgotten thanks, a link to your comment was added to troubleshooting guide

amitabhaghosh197 · 2014-12-03T17:01:09Z

Recently I got another fix for updated font awesome for ie8 . I added slectivizr.js and it worked for ie8

tagliala · 2014-12-03T17:22:11Z

@amitabhaghosh197 thanks

is this one? http://selectivizr.com/

amitabhaghosh197 · 2014-12-04T18:40:59Z

Yes, that is. It is perfectly working with all versions of Font Awesome. I have tested it.

tagliala · 2015-03-19T11:49:11Z

Refers to twbs/bootstrap#13863

https://github.com/twbs/bootstrap/pull/13866/files#diff-b6ea1aa54468ea01aaf88a8b32d925d7R109

Closing here

aallou · 2015-10-29T11:06:37Z

This solution is ok for me :

Add font (glyphicons) in your css, although the bootstrap included :

@font-face {
font-family: 'Glyphicons Halflings';
src: url('......./bootstrap-3/fonts/glyphicons-halflings-regular.eot');
src: url('......../bootstrap-3/fonts/glyphicons-halflings-regular.eot?#iefix')
format('embedded-opentype'),
url('....../bootstrap-3/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('....../bootstrap-3/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('......../bootstrap-3/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')
format('svg');
}

rjgotten · 2015-10-30T08:11:13Z

This solution is ok for me

Only reason that this seems to work for you, is that including the font-face definition in an earlier location in your CSS in »this one specific occasion« only, causes the font to finish loading before IE's first crack at rendering the page.

Thus you avoid the issue with IE not repainting pseudo-elements, because they're already completely rendered as they should be on first paint.

However, you have absolutely zero control over all the timing conditions involved and thus zero guarantee that this will work correctly everywhere on all connections for everyone.

tagliala closed this as completed Jun 6, 2013

tagliala reopened this Jun 15, 2013

tagliala mentioned this issue Oct 6, 2013

Can't change icon color through jquery addClass() In IE8 #2108

Closed

tagliala mentioned this issue Jan 9, 2014

IE8 IFrame Reload Icons Disappear #2717

Closed

Scotchester mentioned this issue Mar 5, 2014

Font Awesome doesn't work sometimes on IE8 cfpb/capital-framework#41

Closed

tagliala mentioned this issue Mar 26, 2014

.eot reference in FontAwesome css ignored #3143

Closed

BBosman mentioned this issue Jun 19, 2014

Glyphicon weirdness on IE8 twbs/bootstrap#13863

Closed

This was referenced Oct 6, 2014

ie8 Problem #4665

Closed

FontAwesome is not working on IE 8 #4671

Closed

tagliala mentioned this issue Dec 3, 2014

Icon loading error on Font awesome page (IE8 - winxp) #5115

Closed

This was referenced Dec 11, 2014

Icons don't show up in IE8 #696

Closed

Icons appear on IE8 / XP only after hovering the page #354

Closed

tagliala closed this as completed Mar 19, 2015

tagliala mentioned this issue Mar 19, 2015

Document #954 #6002

Closed

anuragvats25 mentioned this issue Sep 18, 2017

Font-Awesome icons disappears only after page refresh in IE11. #11534

Closed

On IE8, font disapear when refresh #954

On IE8, font disapear when refresh #954

Comments

FabGre commented Apr 15, 2013

tagliala commented May 21, 2013

tagliala commented Jun 6, 2013

andparsons commented Jun 11, 2013

ecowden commented Jun 14, 2013

tagliala commented Jun 15, 2013

FabGre commented Jun 17, 2013

tagliala commented Jun 17, 2013

tagliala commented Jun 17, 2013

tagliala commented Jun 17, 2013

FabGre commented Jun 17, 2013

ecowden commented Jun 18, 2013

tagliala commented Jun 18, 2013

tagliala commented Jul 5, 2013

fatcrobat commented Jul 26, 2013

tagliala commented Jul 26, 2013

fatcrobat commented Jul 26, 2013

tagliala commented Jul 26, 2013

shapeshifta78 commented Sep 23, 2013

nicodiaz commented Oct 29, 2013

xzyfer commented Nov 14, 2013

RKS213 commented Nov 30, 2013

tagliala commented Nov 30, 2013

RKS213 commented Nov 30, 2013

cbirdsong commented Dec 24, 2013

tagliala commented Dec 24, 2013

charliematters commented Mar 25, 2014

RKS213 commented Mar 25, 2014

charliematters commented Mar 25, 2014

tagliala commented Mar 25, 2014

charliematters commented Mar 25, 2014

charliematters commented Mar 25, 2014

tagliala commented Mar 25, 2014

charliematters commented Mar 25, 2014

tagliala commented Mar 26, 2014

drKnoxy commented May 20, 2014

tagliala commented May 20, 2014

amitabhaghosh197 commented Jun 20, 2014

rjgotten commented Dec 3, 2014

tagliala commented Dec 3, 2014

amitabhaghosh197 commented Dec 3, 2014

tagliala commented Dec 3, 2014

amitabhaghosh197 commented Dec 4, 2014

tagliala commented Mar 19, 2015

aallou commented Oct 29, 2015

rjgotten commented Oct 30, 2015