Question

所以我在IE8上有一个非常奇怪的问题：

我正在使用fontawesome并且我遇到了一些编码问题，但不是我放在HTML中的每个图标。

JSFiddle

在JSFiddle上一切正常......但在我的网站上它没有显示第一个图标（带有黑色背景的红色星号）。

当我进入浏览器菜单时：查看＆gt;编码＆gt; UTF-8（已设置），然后就可以了!! （这有多奇怪......）

我在html文件中设置了编码样式：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

我无法确定这是一个错误还是我做错了什么。

有什么想法吗？

修改

关注this answer我在代码的开头添加了这个：

<!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" />

我之前有这个：

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

我也试过<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

当我第一次加载页面时（在栏中输入我的网址），每个图标都显示正确。但是当我重新加载（CTRL + R或任何刷新方法）时，第一个图标被一个空矩形替换......

Answer 1

解决这个问题的唯一方法（我发现）：

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);

    }
});

用HTML格式：

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

我希望这会有所帮助。

Answer 2

尝试像这样设置字符集：<meta charset="utf-8" />

Answer 3

我认为这是因为您没有在CSS中定义font-family。因此，它会回退到您的浏览器的默认字体，其中字符不存在。

这也可能是IE8的问题。不同的浏览器需要不同的文件类型进行嵌入。确保使用样式表中Font Awesome中包含的所有文件类型。

希望这有帮助！

Answer 4

您是否可以将浏览器设置为特定编码？

在IE中，转到View -> Encoding，然后点击"Auto-Select"并重新加盖样式表。

fontawesome / IE8：编码麻烦

修改

4 个答案: