Question

我正在使用bootstrap，非常新的一切。在我的生产方面，我的图标看起来很好，在safari和chrome下它们看起来也很好。我用来链接要显示的图标的代码如下：

 html, body {
 padding: 0px;
 margin: 0px;
}

#main {
 height: 100vh;
 width: 100%;
 background: gray;
}

/* Logo section */

.button-logo {
 display: block;
 width: 100%;
 height: 20%;
 background: #EB008B;

 text-decoration: none;
 text-align: center;

 transition: height 1s ease;
}

.button-logo:target {
 height: 5%;
}

/* Speaking section */

.button-speaking {
 display: block;
 width: 100%;
 height: 20%;
 background: #EF2C78;

 text-decoration: none;
 text-align: center;
}

.section-speaking {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-speaking:target {
 height: 20%;
}

/* Writing section */

.button-writing {
 display: block;
 width: 100%;
 height: 20%;
 background: #F35866;

 text-decoration: none;
 text-align: center;
}

.section-writing {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-writing:target {
 height: 20%;

 transition: height 1s ease;
}

/* About section */

.button-about {
 display: block;
 width: 100%;
 height: 20%;
 background: #F68353;

 text-decoration: none;
 text-align: center;
}

.section-about {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-about:target {
 height: 20%;

 transition: height 1s ease;
}

/* Contact section */

.button-contact {
 display: block;
 width: 100%;
 height: 20%;
 background: #FAAF40;

 text-decoration: none;
 text-align: center;
}

.section-contact {
 display: block;
 width: 100%;
 height: 0%;
 background: black;

 transition: height 1s ease;
}

.section-contact:target {
 height: 20%;

 transition: height 1s ease;
}

该网站是iskittle.co.uk，如果你看到其他除IE之外的图标出现。我有些难过......我想这将与IE如何处理CSS如何获取图像有关。

就像我说的我是新手，但我认为它可以从更大的图像中获取图标http://iskittle.co.uk/images/icons/glyphicons-halflings-white.png

为什么chrome和safari能够弄清楚如何做到这一点但没有IE ...任何想法/帮助都会很棒，我在网上做了很多搜索，但似乎不能直接回答。 ..

Answer 1

由于IE无法下载.woff文件，因此未加载字体。 Internet Explorer对使用字体的权限更加挑剔。要修复它，请检查：

确保该文件存在于服务器上，并且可以从http://iskittle.co.uk/font/fontawesome-webfont.woff。

如果已经存在，请确保您的IIS服务器已正确设置以部署woff文件。在web.config中，请确保存在以下内容：

<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

Answer 2

在CSS文件中查找：

@font-face {
  font-family: "FontAwesome";
  src: url("../font/fontawesome-webfont.eot");
  src: url("../font/fontawesome-webfont.eot") format("eot"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg");
  font-weight: normal;
  font-style: normal; }

更改此部分：

src: url("../font/fontawesome-webfont.eot") format("eot"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg");

对此：

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

Internet Explorer中未显示引导程序图标

2 个答案: