fontawesome / IE8 : encoding troubles

StackOverflow https://stackoverflow.com/questions/23223374

Вопрос

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.

JSFiddle

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...

Это было полезно?

Решение

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.

Другие советы

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

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!

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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top