CSS Font Awesome 字体在 IE8 上显示为框

Question

提问by Jason

So I am using Font Awesomein a project and in testing I'm running into issues with IE8.

所以我在一个项目中使用Font Awesome，在测试中我遇到了 IE8 的问题。

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.

在 Windows IE9 上，Chrome 和 Firefox 正确显示字体（OS X 上的 Firefox、Chrome 和 Safari 也是如此），但 Windows 上的 IE8 有一个问题，我用一个框代替字体。

enter image description here

在此处输入图片说明

My code is:

我的代码是：

<!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 charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

I have the four font files...

我有四个字体文件...

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff

...where they belong and they are readable by the world (755 permissions). What am I missing? Do I have to do something with compatibility view in IE8?

...它们属于哪里并且它们可以被全世界读取（755 个权限）。我错过了什么？我必须对 IE8 中的兼容性视图做些什么吗？

The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.

同一台计算机在 Font Awesome 网站上查看字体很好，所以它一定是我做错了。

As requested, a copy of font-awesome.css is here: font-awesome.css. It is more or less what I downloaded from them with the exception of the path to the font files.

根据要求，这里有一个 font-awesome.css 的副本：font-awesome.css。除了字体文件的路径外，这或多或少是我从他们那里下载的。

Based on @Abody97 I added https://html5shim.googlecode.com/svn/trunk/html5.jsinto the mix (Code above has been updated). Still no luck, even after a refresh and a delete cache refresh.

基于@Abody97，我添加了https://html5shim.googlecode.com/svn/trunk/html5.js（上面的代码已更新）。即使在刷新和删除缓存刷新之后，仍然没有运气。

Answer 1

回答by rolegio

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

我遇到了同样的问题并找到了解决方案，我会在此处发布，以防有人仍然需要它。

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

问题是 IE 无法加载字体文件，它正在构建返回 404 错误的奇怪 GET 请求。

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problemsI was able to fix the issue.

使用这里找到的技巧：http: //www.fontspring.com/blog/fixing-ie9-font-face-problems我能够解决这个问题。

Add ?#iefixto the eot url in the CSS that contains the font-face (in this case font-awesome.css)

添加?#iefix到包含 font-face 的 CSS 中的 eot url（在本例中font-awesome.css）

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

回答by Jason

This appears to be a really common issue and according to this discussionhas to do with the character being attached using :before. I actually found the easiest way to get it working in IE 8 is to not use the fa-nameclass and insert the character manually.

这似乎是一个非常普遍的问题，根据此讨论与使用 :before 附加的字符有关。我实际上发现让它在 IE 8 中工作的最简单方法是不使用 fa- name类并手动插入字符。

e.g. Instead of:

例如，而不是：

<i class="fa fa-user fa-lg"></i>

use:

用：

<i class="fa fa-lg">&#xf007;</i>

The character codes can be found on the Font Awesome Cheatsheet. This seems to work all the time, no matter what IE version.

可以在Font Awesome Cheatsheet上找到字符代码。这似乎一直有效，无论 IE 版本如何。

Hope this helps someone,

希望这可以帮助某人，

Jason

杰森

Answer 3

回答by Chris

Try adding this to your headbefore including CSS:

尝试head在包含 CSS 之前将其添加到您的：

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 4

回答by mr_x_hacker

just had the same problem and solved it by setting the IE8 "security level" to something below "High".

刚刚遇到了同样的问题，并通过将 IE8 的“安全级别”设置为“高”以下来解决它。

In general, I could reproduce the "boxes" by making the font files (eot, woff, ttf...) "not available" (e.g. resulting in a 404 response) - so I assume, on securiy level "High" they're just not loaded...

一般来说，我可以通过使字体文件（eot、woff、ttf...）“不可用”（例如导致 404 响应）来重现“框” - 所以我假设，在安全级别“高”上它们'只是没有加载...

Answer 5

回答by Jason

It turns out that there was an extra <html>tag being generated by an included file that was the source of my problems. So, in my final file I had both <html lang="en">AND <html>The extra <html>tag was throwing IE into quirks mode which cause the font-awesome icon issue I was having.

事实证明，<html>包含的文件生成了一个额外的标签，这是我的问题的根源。所以，在我的最终文件中，我同时拥有<html lang="en">AND<html>额外的<html>标签将 IE 置于怪癖模式，这导致了我遇到的字体很棒的图标问题。

Eliminating that rogue <html>and verifying my headers were set correctly fixed everything for me.

消除那个流氓<html>并验证我的标题设置是否正确为我修复了一切。

I am now using a boilerplate set of header tags on all pages:

我现在在所有页面上使用一组样板标题标签：

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

Before I had this on one page:

在我在一页上写这个之前：

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

Answer 6

回答by Mano

Making Cache control in the response header as private for the font file worked perfectly in IE8 for me. More explanation on this can be found here - where he explains how he solved for PDF files (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista)).

将响应头中的缓存控制设为字体文件的私有对我来说在 IE8 中工作得很好。可以在此处找到有关此的更多解释 - 他解释了他如何解决 PDF 文件（无法在 IE 8（在 64 位 Vista 上）中显示来自 HTTPS 的 PDF）。

Hope this helps.

希望这可以帮助。

Answer 7

回答by Sean Anderson

Under IIS (MVC environment) I had to add the following rule to my Web.config:

在 IIS（MVC 环境）下，我必须将以下规则添加到我的 Web.config 中：

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

Answer 8

回答by Przemys?aw Kaczmarczyk

IE under 9 version not support wofffile format. Probably that is answer why you can't get them on IE8

IE 9 版本不支持woff文件格式。可能这就是为什么你不能在 IE8 上得到它们的答案

Answer 9

回答by viber8

The only thing that worked for me was this:

唯一对我有用的是：

https://github.com/FortAwesome/Font-Awesome/issues/2324

Combined with the other answer from Jason: e.g. Instead of:

结合杰森的其他答案：例如而不是：

<i class="fa fa-user fa-lg"></i>

use:

用：

<i class="fa fa-lg">&#xf007;</i>

Answer 10

回答by Euler

It is not only IE, all the browsers have the same issue.

不仅仅是IE，所有浏览器都有同样的问题。

The funny thing is you need to put your files in the right location.

有趣的是，您需要将文件放在正确的位置。

This means you need the below structure:

这意味着您需要以下结构：

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

and then put the link sylte in your index.html as

然后把链接 sylte 放在你的 index.html 中

<link rel="stylesheet" href="./font-awesome.min.css">in between head

<link rel="stylesheet" href="./font-awesome.min.css">在头之间

a very important note is: DO NOT try to COMBINE fontawesome folder and any other folder. Keep them separate.

一个非常重要的注意事项是：不要尝试组合 fontawesome 文件夹和任何其他文件夹。将它们分开。

now test it, and everything is good to go.

现在测试它，一切都很好。

CSS Font Awesome 字体在 IE8 上显示为框

提问by Jason

回答by rolegio

回答by Jason

回答by Chris

回答by mr_x_hacker

回答by Jason

回答by Mano

回答by Sean Anderson

回答by Przemys?aw Kaczmarczyk

回答by viber8

回答by Euler

相关推荐

最近更新

标签

CSS Font Awesome 字体在 IE8 上显示为框

提问by Jason

回答by rolegio

回答by Jason

回答by Chris

回答by mr_x_hacker

回答by Jason

回答by Mano

回答by Sean Anderson

回答by Przemys?aw Kaczmarczyk

回答by viber8

回答by Euler

相关推荐

CSS 在 Twitter Bootstrap 中更改选择标签的宽度

CSS 如何使用css将文本放在“框”的右上角或右下角

使用 CSS 的文本居中在 IE 中不起作用

CSS 如何在 twitter 的 bootstrap 2.1.0 中使用新的词缀插件？

相关推荐

最近更新

标签