Twitter bootstrap 引导程序3.2.0图标未显示在internet explorer中

我使用的是twitter bootstrap 3.2.0，我使用了一些图标，它们在ff、chrome和opera中正常工作，但不会显示在Internet Explorer中

奇怪的是，如果我打开getbootstrap.com网站并查看“组件”部分，即使在那里它们也没有正确显示，因此我怀疑我这方面是否存在任何实现问题

还有其他人有类似的问题吗？？还是对这种行为有所了解

下面是我的InternetExplorer11中它的外观

---

好的，我自己解决了这个问题

问题是，不知何故，我的IE进入了某种安全状态，字体下载被禁用

因此，我更改了“受保护模式”的自定义级别-您可以在Internet选项菜单的安全选项卡中找到

单击“自定义级别…”按钮后，您必须搜索“字体下载”并将其更改为“启用”

---

谢谢你对任何人的帮助

对于那些可能遇到类似问题的人，Internet Explorer中存在一个错误，导致webfonts在某些缓存控制情况下无法呈现

如果服务器正在发送标头Pragma:no cache和/或cache Control no store，这将导致IE无法呈现图示符

---

这花了我几个小时来追踪，所以希望这里的帖子能帮助其他人节省时间

为了解决nginx设置问题，我将其添加到配置文件中

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}

---

要在wildfly设置中解决此问题，您需要在untertow部分更改standalone.xml文件：

<server name="default-server">
    <host name="default-host" alias="localhost">
        ...
        <filter-ref name="custom-max-age" predicate="path-suffix['.woff'] or path-suffix ['.woff2'] or path-suffix ['.ttf'] or path-suffix ['.svg'] or path-suffix ['.eot'] or path-suffix ['.otf']"/>
    </host>
</server>
<filters>
    <response-header name="custom-max-age" header-name="Cache-Control" header-value="public"/>
</filters>

...

就像我在这篇文章中提到的：

问题在于，浏览器（IE 11）需要接收：

• 静态内容文件需要具有缓存控制和Pragma “公共，最大年龄=600”
• 角度请求需要有缓存控制和 带有“无缓存”的杂注

在我的应用程序中（.net核心+角度）

app.js

var cacheConfig = function ($httpProvider) {

$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.cache = false;

if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
};

Startup.cs

  app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
                    ctx.Context.Response.Headers.Append("Pragma", "public,max-age=600");
                    //ctx.Context.Response.Headers.Append("ETag", DateTime.Now.Ticks.ToString());
                }
            });

---

现在回答这个问题已经太迟了，但最近我遇到了Angular 4+grails作为后端的问题。对我来说，grails中webapp文件夹中的所有资源都在设置

Cache-control : 'no-store'. 

并且没有像modified-since或expires这样的头文件。这是导致问题的原因。我更新了下面的application.yml来解决这个问题，它对我很有效

grails:
    resources:
        cachePeriod: 10 

这将设置如下所示的响应头

Cache-Control   : max-age=10

---

在我们的例子中，我们的企业windows 10图像有一个设置来阻止只影响IE11的不受信任字体。Chrome/FF/Edge所有字体都能正确显示。在IE11中，在我的个人电脑（不是我的公司电脑）上访问我们的网站时，字体显示得非常好

有关详细信息，请参阅本文：

---

从CDN而不是应用程序中的resources文件夹加载bootstrap.css。 从CDN加载后，它对我有效

“签入网络”选项卡使用图标屏幕截图的文件或未加载的图标是什么。在我的例子中，IE 11浏览器中没有加载“Glyphion屏幕截图”

在该检查之前，字体已启用

未加载的图标将在样式选项卡f12调试工具中显示错误

---

如果Java应用程序存在此问题，解决方案可能是创建一个过滤器（javax.servlet.Filter的子类），防止在对fonts文件夹的请求的响应中设置这些标题。这似乎对我们的项目很有效。确保将筛选器配置为web.xml文件中的第一个组件之一。更多信息此处

检查网络选项卡，如果它使用404字体。不，没有404，一切似乎都很好。可能你安装了奇怪的字体或IE插件。我不认为这是一个插件问题，因为我使用IE只是为了测试，所以我没有安装插件。CSS中使用的字体系列被称为“半人字形”。这应该是对的，不是吗？很好的发现。我在这件事上被困了好几个小时，直到找到你的解决办法。如果IE真的在控制台上显示一条警告，说它不是下载的，那就太好了。谢谢。这对我不起作用，因为图标不是在所有浏览器中都显示。它们加载正确，没有显示404或任何其他错误。还有其他想法吗？字体下载已启用此解决方案有效！不知何故，no-cache头并不总是起作用，并导致更多问题。谢谢。是的，这是正确的答案，实际的答案是