要为字体文件设置正确的mime-types，请将此行添加到config：

Question

我是font-awesome图标的新手。我有一个页面，其中有一个用户可以搜索数据的过滤器。我在搜索链接之前添加了字体真棒图标（如下面的截图所示），我可以在除IE 11之外的所有浏览器中看到此图标。有趣的是我在其他页面中也有这个图标，我可以在IE中看到它11，但我看不到这个图标（如下面的屏幕截图所示）。

以下是IE 11的截图：

以下是chrome的截图：

任何人都可以帮我解决这个问题吗？

Answer 1

我遇到了同样的问题，我通过在<meta http-equiv="X-UA-Compatible" content="IE=edge">中添加此元标记作为 FIRST 标记解决了这个问题：
no-store

另外，根据white space exclusions option，请检查以下内容：

对于Internet Explorer ：您不能在缓存控制标题中提供带no-cache选项的文件（参考号：＃6454）;
对于Internet Explorer和HTTPS ：您不在Pragma标头中提供using System; public class Program { public static void Main() { DateTime checkIn = new DateTime(2016, 8, 31); DateTime checkOut = new DateTime(2016, 9, 1); TimeSpan difference = checkOut - checkIn; Console.WriteLine(difference); } }选项的文件。

Answer 2

IE在使用HTTP-Header @font-face传递Pragma=no-cache时遇到问题。您可以在问题跟踪器here

上看到它

不幸的是，该问题被标记为无法解决，但有一些解决方法。对我有用的是使用servlet过滤器，避免设置Pragma标头。

其他不适合我的解决方案：

Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9

Font awesome icons becomes invisible in IE after refresh

Answer 3

从IE控制台尝试运行以下脚本

$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />');

如果有效，则尝试导入CDN而不是在本地存储。

Answer 4

如果你使用带有Spring Security的Spring MVC，Spring Security会自动添加没有缓存标头，因此会导致IE11上的字体很棒。

（https://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control）

我通过在ResourceHandler中添加WebMvcConfiguration来解决此问题，因为font-awesome配置为允许浏览器缓存字体。

public class WebMvcConfiguration extends WebMvcConfigurerAdapter
{
    @Override
    public void addResourceHandlers( ResourceHandlerRegistry registry )
    {
        registry.addResourceHandler("/assets/vendor/font-awesome/fonts/**")
            .addResourceLocations("/assets/vendor/font-awesome/fonts/")
            .setCachePeriod(31556926);        
    }
}

Answer 5

如果apache服务器正在为字体文件提供服务，请将以下条目添加到httpd.conf或.htaccess中。

要为字体文件设置正确的mime-types，请将此行添加到config：

 AddType application/vnd.ms-fontobject .eot
 AddType font/truetype .ttf
 AddType font/opentype .otf
 AddType font/opentype .woff
 AddType image/svg+xml .svg .svgz

要更新字体文件标题，此修补程序完美地用于在IE浏览器中呈现字体图标。

<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset no-store
</LocationMatch >

Answer 6

这修复了IIS中的字体图标：使用以下内容将web.config添加到字体目录：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Pragma" value="none" /> 
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Answer 7

我遇到了与字体真棒相同的问题。我在.net应用程序中添加了一个自定义的httpmodule。

public class MyHttpModule : IHttpModule
    {
        public void Dispose()
        {
        }
        public void Init(HttpApplication context)
        {
            context.EndRequest += new EventHandler(Context_EndRequest);
        }
        protected void Context_EndRequest(object sender, EventArgs e)
        {
            HttpResponse response = HttpContext.Current.Response;
            if (string.Compare(HttpContext.Current.Request.Browser.Browser, "InternetExplorer", StringComparison.InvariantCultureIgnoreCase) == 0)
            {
                response.Headers.Set("Pragma", "none");
            }
        }
    }

并在web.config中注册该模块。

<system.webserver>
    <modules>
          <add type="MyHttpModule, Culture=neutral" name="MyHttpModule"/>
    </modules>
</system.webserver>

它解决了这个问题。

Answer 8

我遇到了同样的问题，我刚刚在标签中添加了以下链接，但它确实有效。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

希望这有帮助！

Answer 9

我在Font Awesome 4.7和IE 11中存在相同的问题。我通过在<head>部分中添加以下元信息来解决此问题：

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

Answer 10

我遇到了同样的问题。我的技术堆栈是Spring boot 2.0和Angular 8。仅当您尝试通过IE 11上的HTTPS刷新页面时，才会出现此问题。

问题是，浏览器（IE 11）期望Cache-Control max-age。您需要为静态资源设置此标头。要解决此问题，请在application.property文件中设置以下属性。

spring.resources.cache.cachecontrol.max-age=14400

Answer 11

就我而言，它的.eot字体文件已损坏。我生成了一个新的（+新的.css样式），它解决了这个问题。尝试一下。

Answer 12

或者，您的Internet Explorer设置可能会阻止浏览器下载字体。在我们其中一台受到严格保护的服务器上就是这种情况。

尝试以下步骤：

打开Internet Explorer
转到“ Internet选项”
在“安全性”选项卡下，单击“自定义级别...”。
向下滚动到“下载”，并确保已启用“字体下载”

Answer 13

我遇到了同样的问题，到处搜索并且没有运气。看来这是由于Microsoft累积安全性更新特别是停止加载字体/图像：

https://support.microsoft.com/en-us/help/4486474/cumulative-security-update-for-internet-explorer-february-12-2019

https://support.microsoft.com/en-us/help/4491113/cumulative-update-for-internet-explorer-february-19-2019

要修复此问题，您需要安装March补丁：

https://support.microsoft.com/en-us/help/4489873/cumulative-security-update-for-internet-explorer-march-12-2019

Answer 14

我们最近遇到了从Rails应用程序提供Font Awesome字体文件的问题。混乱之处在于我们没有传递Pragma或Cache-control响应标头-因此本文中的先前答案有点令人困惑。

总结-此问题是由以下两种情况引起的：

该请求是通过HTTPS连接从font-face发起的（对于在本地重新生成此错误至关重要）。
Pragma标头的值为no-cache，或者在我们的示例中，我们将提供压缩后的所有内容，并且Vary标头传递的值不是Accept-Encoding 。

我们通过在Rack :: CORS配置中添加以下内容来解决此问题：

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'

        # Setting Vary to Accept-Encoding required or IE11 fonts will not load from local cache
        resource('*.eot',
                 headers: :any,
                 credentials: false,
                 methods: [:get],
                 vary: ['Accept-Encoding'])
      end
    end

Answer 15

对于Internet Explorer 11，您可以这样更改CSS：

nb-icon.menu-icon { 
                  visibility: hidden; 
                  } 
nb-icon.menu-icon::before{ 
                  visibility: visible; 
                  }

Answer 16

两种解决方案中的任何一种对我都有效

检查以下是否全部提及 FontAwesome.otf fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontawesome-webfont.woff fontawesome-webfont.woff2
然后我删除了version参数，例如。？v4.7.0在CSS字体的每个src中都可以使用，现在可以在我的IE 11中使用。

字体真棒图标没有出现在IE 11中，但在其他浏览器中显示

16 个答案:

要为字体文件设置正确的mime-types，请将此行添加到config：

要更新字体文件标题，此修补程序完美地用于在IE浏览器中呈现字体图标。