Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
prasathraj92 opened this issue Dec 2, 2014 · 10 comments
Closed

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

prasathraj92 opened this issue Dec 2, 2014 · 10 comments

Comments

@prasathraj92
Copy link

There is a bug (I.E) in font awesome page...

The bug is:
Go to Examples page ,
In " Fixed Width Icons " place - Ctrl+click Home (Anything),
Now the icons are not loaded properly,

image

Likewise, I have same issue on my page,

image

If any one can solve this issue, it will be very helpful for me.
Thank you!
@tagliala
Copy link
Member

tagliala commented Dec 2, 2014

can't confirm. IE11 windows 7 x64 sp1

please provide more information

PS: control+click on home or whatever will load the same page in another tab

@prasathraj92
Copy link
Author

There is the problem, In the new tab the F.A icons are not loading properly...!
The top image shows the problem page..!

Windows xp - SP3 ( Internet Explorer - 8)
Ctrl+Click anyone of the below section...

image

@tagliala
Copy link
Member

tagliala commented Dec 3, 2014

Sorry, at the moment I don't have such a machine.

It could be the random issue described here #954

@tagliala tagliala changed the title Icon loading error on Font awesome page Icon loading error on Font awesome page (IE8 - winxp) Dec 3, 2014
@prasathraj92
Copy link
Author

-Thanks for your reply!

#954

This is somehow like my problem.. but in my app after hover the icon comes.

There are lot of answers for hover problem.. but nothing works clear.. They are like scripting!
I need perfect solution.

@tagliala
Copy link
Member

tagliala commented Dec 3, 2014

There are lot of answers for hover problem.. but nothing works clear.. They are like scripting!
I need perfect solution.

if there were a perfect solution, we would definitely take it into account. 😔

I have a couple of suggestions:

  1. customize fontawesome at fontello.com and select only the minimum amount of icons you need. AFAIU, size matters: the bigger the size, the higher the chances of getting a random issue

  2. do not use the pseudo element. You will break screenreaders, but try something like:

<span class="fa">&#xf015;</span> Home

Get html codes from here: http://fontawesome.io/cheatsheet/

  1. Go back to png sprites if you need to support IE8 in a production environment. Take a look at this repository: https://github.com/encharm/Font-Awesome-SVG-PNG

@tagliala tagliala added the IE8 label Dec 3, 2014
@rjgotten
Copy link

rjgotten commented Dec 3, 2014

@tagliala

if there were a perfect solution, we would definitely take it into account.

IE8 stubbornly refuses to re-run layout and paint on pseudo-elements in many different cases. The only surefire way to force it to do its job is to explicitly alter the contents of the pseudo-element using a toggle on the content property.

Try toggling the content property on every pseudo-element on the page when the font-face has finished loading. That should work.

E.g. use a CSS ruleset like:

html.ie-force-pseudo-refresh :before,
html.ie-force-pseudo-refresh :after {
  content : none !important;
}

and use some JS to assign it to the <html> element and remove it again after a short (e.g. 10ms) timeout.

the bigger the size, the higher the chances of getting a random issue

The problem occurs when IE has started painting the page using the fallback font, before the webfont with the icons has finished downloading. The odds can be played somewhat by reducing download size (and thus making the icons arrive faster), but you can never get rid of the problem with a 100% guarantee.

For instance; if you have a page with HTML and CSS that comes from cache and a webfont that is either not cached or has expired cache, you will more or less always hit this problem,

@tagliala
Copy link
Member

tagliala commented Dec 3, 2014

@rjgotten
Thanks for your really exhaustive answer

I think that the force pseudo refresh stuff + javascript is not a perfect solution... But it is a good workaround, if you could also share a javascript to refresh icons I would definitely add it to the troubleshooting guide

For instance; if you have a page with HTML and CSS that comes from cache and a webfont that is either not cached or has expired cache, you will more or less always hit this problem,

Does IE8 support base 64 embedded font? Is it a viable workaround?

@tagliala
Copy link
Member

tagliala commented Dec 3, 2014

@prasathraj92 please give a try here:

#954 (comment)

@tiesont
Copy link

tiesont commented Dec 5, 2014

@tagliala Just an FYI, if you need a older IE to test on, I find the VMs from https://www.modern.ie/ work fairly well.

@tagliala
Copy link
Member

locking here, please refer to #954

@FortAwesome FortAwesome locked and limited conversation to collaborators Dec 11, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tiesont @rjgotten @tagliala @prasathraj92