Jump to content


Photo
- - - - -

Font Awesome Icons not showing in IE8

font awesom ie8

  • Please log in to reply
14 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 12:26 PM

Hi everybody, I read every post about this problem and I did not solved it yet :-(.

I use Font Awesome icons in my design for ruzzleonline[dot]net and they keep showing the numbers in  IE8 instead of the logo's.

 

I activated the box to 'Include Google IE Compatibility Script?'. 

This alone was not enough, what I did I added this code at the Header scripts section, but did not worked either.

 

Please Login or Register to see this Hidden Content

 

 

In earlier post from me about Google IE compatibility script this screenshot shows that code is already there on the page: 

Please Login or Register to see this Hidden Content

.

The only difference is the Code Pagelines includes is html5shim (with a M) and mine is html5shiv (with a V). On the internet though I read that that's the only difference, but it works the same...

 

So I was not surprised it did not work ;-).

 

I did my test in IE tester and browsershots.org (which also use IE tester)...

 

Please can anybody tell me how to get this work?

 

Kind regards,

 

Willem



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15825 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 February 2013 - 01:24 PM

Hi Willem,

 

I can't test IE8 correctly, but I have just loaded our Font Awesome docs page in BrowserStack and all the icons appears as numbers so there may well be an issue. I will report back here when I have more information for you.



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 04:02 PM

Thanks!



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 February 2013 - 01:50 AM

Hi there, if you deactivate the google IE script option in Pagelines, does it work then?

 

I'm only asking as I found this -

Please Login or Register to see this Hidden Content



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15825 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 February 2013 - 07:43 AM

Just an update.

 

One of our developers tested this and had no such issue, so as James suggested above, this may be the cause. Also, my test is really accurate as BrowserStack was taking eons to load the page, so this may be the reason why I seen what I did.

I tested a few hours later the there was no issue.



#6 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 22 February 2013 - 03:22 PM

Hi Danny, don't understand your explenation about eons and why the test with your page is correct now.

However, James B, I disabled the Google IE script option and it seems to work now. Can one of you check it also one time?

 

Only thing I don't understand, the link you provided is talking about a conflict with IE9.js, and like this image shows 

Please Login or Register to see this Hidden Content

 Pagelines is using IE8.js (why is pagelines not working with the newest code here?).

So, because it's not IE9.js, I don't understand why Font Awesome is not working with Google IE script option ON. @Danny, do you have this script on or off in your installation?

 

The Google script sound really important to have on because it solves a lot of html5 issues. Pagelines uses HTML5. So is there no way I can combine Font Awesome and The google script.

Ofcourse I did not expect in the first place that this would cause problems :-(. Because the Google code should solve things right?

 

Kind regards

 

Willem



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 February 2013 - 09:42 PM

Willem,

 

PageLines does use the very latest javascript.  The code you're looking at is for a solution Simon added to assist with compatibility issues. It's not guaranteed to fix everything, but helps in resolving some JS issues. Keep in mind that IE8 predates CSS3 and HTML5, so not everything works correctly in IE8, in spite of the IE compatibility option. 

 

I'm not sure, but I believe you can apply FontAwesome to some text, and use Google Fonts for others.  FontAwesome post-dates IE8 considerably and I'm not sure if they're perfectly compatible with each other.  You'd have to ask at Microsoft about that.



#8 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 24 February 2013 - 01:11 AM

Hi,

 

1) Why I say Pagelines is using version IE8.js is because recently this screenshot is made for my website, check this post: 

Please Login or Register to see this Hidden Content

. So I don't understand why you say Pagelines is using IE9.js. For some reason however deactiving Compability script makes Font Awesome work in IE8.

2) Your explenation in English I don't understand completely. But you mention Google Fonts, I don't know why. What has that to do whit this problem? Let me ask it this way. As far as it seemes now I can not use Font Awesome (IE8 problems) when the compability script is ON. Is this true? If it's true, is it a good idea to mention this at the checkbox of the compablity script? 

3) In case I can not use it both, what are the negative sides I don't use the compablity script, because as far as I understand it it's important to have it ON.

4) If the two don't go together, what would you do, activate compability script and don't use Font Awesome or vice versa? And why?

 

Kind regards,

 

Willem

PS I don't know why, but this thread does not show up at 'my content' in my menu of this forum... just FYI.



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15825 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 February 2013 - 11:58 AM

When I said eon, I mean that my BrowserStack test took a long period of time. Although BrowserStack isn't in my opinion the greatest solution for testing browser compatibility, I can confirm that our support documentation page does have the IE script enabled.

 

The IE compatibility script is not created by PageLines and if it is effecting Font Awesome, then simply disable the script.

 

I have also disabled the option for our support documentation.



#10 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 14 March 2013 - 06:43 PM

Hi Danny,

 

So If I understand you correctly you found out after this thread you support page also showed numbers, so you also disabled the IE script now?

I'm asking you this specific because my English is not that good and I would like to have that confirmation you did the same like me to get Font Awesome work with IE8.

 

The above is question one...

 

I still have an other question about the IE compability script, because when I understand you correctly, you and I both have it disabled now.

When I do some testing in IE tester, the icons are there and for the rest I don't see any other problems...

But concerning the text below IE has problems with reconizing html5 like <header>, <footer>...  therefore it's neccesarry to use the IE compability script.

How is it possible, with you and me both having this option disabled, that there are now NO problems in IE tester? Because Pagelines uses both <header> and <footer>, so this should be a problem when I do understand it correctly...

But the test looks like there is NO problem... please help me out with this issue.

 

12. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.

All elements, by default, have a display of inline.

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

  1. header, footer, article, section, nav, menu, hgroup {   
  2.    displayblock;  
  3. }  

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

  1. document.createElement("article");  
  2. document.createElement("footer");  
  3. document.createElement("header");  
  4. document.createElement("hgroup");  
  5. document.createElement("nav");  
  6. document.createElement("menu");  

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp 

Please Login or Register to see this Hidden Content

, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

  1. <!--[if IE]>  
  2. <script src="

    Please Login or Register to see this Hidden Content

    "
    ></script>  
  3. <![endif]-->  
  4.  

 

PS I don't understand what he means with 'trigger' in the text.

 

Kind regards,

 

Willem



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 March 2013 - 03:47 AM

Hi there, from reading Danny's previous message it sounds to me that he has disabled the script and that font awesome works. I will ask him to confirm that for you though.

 

I would imagine the other problems regarding html5 elements are handled within the core code of Pagelines, but I'd need to check with a developer and come back to you.



#12 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 11 June 2013 - 09:10 AM

Hi James, it has been a while I asked some 'technical' question in this thread, do you have an answer from the developers?

 

Kind regards,

 

Willem



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 03:31 PM

Hi Willem,

 

Our developers prioritize issues we bring to them on the basis of criticality, not just because we ask.  James did ask, but hasn't had any reply because our developers are rather busy developing, and this is not a commonly requested or critical issue. As soon as they get around to replying, I'm confident James will provide their reply.



#14 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 12 June 2013 - 08:52 AM

Oke Rob, I wait for it.



#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 June 2013 - 12:14 PM

Thank you for your patience.







Also tagged with one or more of these keywords: font awesom, ie8