font awesome icon erscheint nicht in IE 11, aber in anderen Browsern

Question

Ich bin neu in font-awesome Symbole. Ich habe eine Seite, in der es einen Filter gibt, in dem Benutzer die Daten suchen können. Ich habe font awesome icon kurz vor dem Such-Link hinzugefügt (siehe unten Screenshot), ich kann dieses Symbol in allen Browsern außer IE 11 sehen. Das Lustige ist, dass ich dieses Symbol auch in anderen Seiten habe und ich kann es in IE sehen 11, aber ich kann dieses Symbol nur auf dieser Seite nicht sehen. Hier

ist der Screenshot von IE 11:

Hier ist der Screenshot aus Chrom:

Kann mir jemand auf diese helfen?

Answer 1

IE hat ein Problem mit @font-face s geliefert mit dem HTTP-Header Pragma=no-cache. Weitere Informationen here

Leider ist das Problem als nicht lösbar markiert, aber es gibt einige Problemumgehungen. Der, der für mich funktionierte, benutzte einen Servlet-Filter, der vermeidet, dass der Pragma-Header gesetzt wird.

Andere Lösungen, die nicht für mich gearbeitet:

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

Font awesome icons becomes invisible in IE after refresh

Answer 2

Diese festen meine font-Icons in IIS: ein web.config zu Ihrem Font-Verzeichnis mit diesen Inhalten hinzufügen:

Answer 3

Ich hatte das gleiche Problem, ich löste es, indem ich dieses Meta-Tag als FIRST-Tag in hinzufügen:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Auch nach dem official documentation, prüfen Sie folgendes:

Für Internet Explorer: Sie dienen nicht Dateien mit no-store Option in Cache-control-Header (Ref: # 6454) ;
Für Internet Explorer und HTTPS: Sie liefern keine Dateien mit no-cache Option in Pragma-Header.

Answer 4

Von IE Konsole versuchen folgende Skript

$('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" />'); 

Wenn es funktioniert, dann versuchen, um es auszuführen CDN zu importieren, anstatt sie lokal zu speichern.

Answer 5

Ich hatte das gleiche Problem mit der Schriftart super. Ich habe ein benutzerdefiniertes httpmodul in meiner .net-Anwendung hinzugefügt.

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

Und registriert das Modul in web.config.

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

Es löste das Problem.

Answer 6

Wenn der Apache-Server Font-Dateien bereitstellt, fügen Sie der httpd.conf oder .htaccess in die folgenden Einträge hinzu.

richtigen Mime-Typen für Font-Dateien zu setzen, diese Zeilen zu Config hinzu:

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

Schriftart-Dateien Header zu aktualisieren, arbeitete dieses Updates perfekt Font Icons in IE-Browser zu machen.

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

Answer 7

Wenn Sie Spring MVC mit Spring Security verwenden, Spring Security fügt automatisch keinen Cache-Header und so bewirkt, dass font-awesome auf IE11 brechen.

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

löste ich das Problem durch eine ResourceHandler in meinem WebMvcConfiguration für font-awesome Hinzufügen konfiguriert, um den Browser zu ermöglichen, die Schriften cachen.

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