fontawesome / IE8 : encoding troubles

Question

So I have a very strange problem on IE8 :

I am using fontawesome and I get some encoding problems but not for every icons I put in the HTML.

On JSFiddle everything is ok... but on my website it does not display the first icon (the red asterisk with the black background).

When I go in the menu of the browser : View>Encoding>UTF-8 (which is already set), then it is ok !! (how strange this is....)

I have set the encoding style in my html file : <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

I can't find if it is a bug or if I'm doing something wrong.

Any ideas ?

EDIT

following this answer I added this at the beggining of my code :

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
  <meta charset="utf-8" />

I had this before :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />

I had also try <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

When I first load the page (typing my url in the bar), every icon is showing right. But when I reload (CTRL+R or any refresh method), the first icon is replaced by an empty rectangle...

Does this answer help at all? http://stackoverflow.com/a/12953953/1355856 — Andy, Apr 22 '14 at 15:42
I have the same problem with IE 11. After a 'manual' page reload the icons are gone. — noBillSide, Jul 25 '14 at 13:47

score 1 · Accepted Answer · answered Jul 28 '14 at 12:21

The only way (I found) to solve this :

hard refresh icons on domready :

$(function () {
    // only on IE :
    // Solve font-awesome loading troubles in IE8 & less :
    // Solve also performance issues by removing animations
    if (document.getElementsByTagName("html")[0].className.indexOf("ie") !== -1) {
        var head = document.getElementsByTagName('head')[0],
        style = document.createElement('style');
        style.type = 'text/css';
        style.styleSheet.cssText = ':before,:after{content:none !important;}';
        head.appendChild(style);
        setTimeout(function () {
            head.removeChild(style);
        }, 0);

    }
});

with this in HTML :

<html lang="en" <!--[if IE]>class="ie"<![endif]-->>

I hope this will help.

Thanks! My application runs on glassfish, so I fixed it by adding a WebFilter for eot files. In this filter I set the header to cache those files. — noBillSide, Jul 30 '14 at 08:21

score 0 · Answer 2 · answered Apr 22 '14 at 15:10

0

Try setting the charset like this: <meta charset="utf-8" />

answered Apr 22 '14 at 15:10

Andy

4,538
2
26
34

@VladimirOselsky How? I'm not critiquing or requesting clarification, I'm suggesting a potential solution to this problem, should that not be posted as an answer? – Andy Apr 22 '14 at 15:53
@Andy, so you know, Vladimir did not write his comment. There is a [Low Quality Posts queue](http://stackoverflow.com/review/low-quality-posts/4631505) that your question fell into (because of the short length). Vlad voted to delete, and gave that reason. However, this _is_ an answer, because it attempts to solve the problem. (I also voted to keep this post) – gunr2171 Apr 22 '14 at 16:07
@Andy when I first compared your post to question it appeared that OP had exact syntax you had. After closer review I removed my comment. – Apr 22 '14 at 16:14

score 0 · Answer 3 · answered Apr 22 '14 at 15:15

0

I think this is because you are not defining a font-family in your CSS. It is therefor falling back to your browser's default font in which the character doesn't exist.

This may also be an issue with IE8. Different browsers require different filetypes for embedding. Make sure you are using all the filetypes included in Font Awesome inside of your stylesheet.

Hope this helps!

answered Apr 22 '14 at 15:15

Matthew R.

4,332
1
24
39

the CSS class "fa" has a `font-family: FontAwesome;` property – Apolo Apr 22 '14 at 15:28
Ah, gotcha. I didn't see it in the fiddle so I just wanted to make sure! :) – Matthew R. Apr 22 '14 at 15:29
Yes, it is because it is a class of fontawesome.css (I'm just showing my own code) – Apolo Apr 22 '14 at 15:31

score 0 · Answer 4 · answered Apr 22 '14 at 15:23

0

Is it possible you have your browser set to a specific encoding?

In IE, Go to View -> Encoding and click "Auto-Select" and relaod the stylesheet.

answered Apr 22 '14 at 15:23

4dgaurav

11,360
4
32
59

Same strange thing : When I clicked "Auto-select" it solved the problem. And then, when I reload the page I get the error again... – Apolo Apr 22 '14 at 15:30
And that even if the ecoding is always set to 'UTF-8' – Apolo Apr 22 '14 at 15:31

fontawesome / IE8 : encoding troubles

EDIT

4 Answers4