web-dev-qa-db-fra.com

icône de police génial n'apparaît pas dans IE 11, mais apparaissant dans d'autres navigateurs

Je suis nouveau sur les icônes font-awesome. J'ai une page dans laquelle il y a un filtre où l'utilisateur peut rechercher les données. J'ai ajouté une icône de police géniale juste avant le lien de recherche (voir capture d'écran ci-dessous). Cette icône est visible dans tous les navigateurs, à l'exception de IE. voyez-le dans IE 11, mais je ne peux pas voir cette icône uniquement sur cette page (comme dans la capture d'écran ci-dessous).

Voici la capture d'écran de IE 11:

 enter image description here

Voici la capture d'écran de chrome:

 enter image description here

Quelqu'un peut-il m'aider à ce sujet?

internet-explorer-11font-awesome
15
Rohit Gaikwad

J'avais le même problème, je l'ai résolu en ajoutant cette balise meta en tant que balise FIRST dans <head>:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

En outre, selon la documentation officielle , vérifiez les points suivants:

Pour Internet Explorer: vous ne servez pas de fichiers avec l'option no-store dans l'en-tête Cache-control (Ref: # 6454);
Pour Internet Explorer et HTTPS: vous ne servez pas de fichiers avec l'option no-cache dans l'en-tête Pragma.

18
Antoine Dusséaux

IE a un problème avec @font-faces étant livré avec l'en-tête HTTP Pragma=no-cache. Vous pouvez le voir enregistré sur le suivi des problèmes ici

Malheureusement, le problème est marqué comme non résolu, mais il existe certaines solutions de contournement. Celui qui a fonctionné pour moi utilisait un filtre de servlet qui évite que l'en-tête Pragma soit défini.

Autres solutions qui n'ont pas fonctionné pour moi:

Font-awesome disparaît après l'actualisation pour tous les navigateurs ie11, ie10, ie9

Les icônes de police impressionnantes deviennent invisibles dans IE après l'actualisation

9
Josema

Si vous utilisez Spring MVC avec Spring Security, Spring Security n'ajoute automatiquement aucun en-tête de cache, ce qui provoque l'arrêt de font-awesome sur IE11. 

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

J'ai résolu le problème en ajoutant une ResourceHandler dans ma WebMvcConfiguration pour font-awesome configurée pour permettre au navigateur de mettre en cache les polices.

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);        
    }
}
3
Piers Geyman

Depuis la console IE, essayez d’exécuter le script suivant.

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

Si cela fonctionne, essayez d’importer le CDN au lieu de le stocker localement.

3
Swapnil Dalvi

Si le serveur Apache sert des fichiers de police, ajoutez les entrées suivantes au fichier httpd.conf ou .htaccess dans.

Pour définir les bons types MIME pour les fichiers de polices, ajoutez ces lignes à 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

Pour mettre à jour les en-têtes des fichiers de polices, ce correctif fonctionnait parfaitement pour rendre les icônes de police dans les navigateurs IE.

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

J'ai eu le même problème avec la police génial. J'ai ajouté un httpmodule personnalisé dans mon application .net. 

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

Et inscrit le module dans web.config.

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

Cela a résolu le problème.

1
nks

J'ai fait face au même problème et je viens d'ajouter le lien suivant dans la balise et cela a fonctionné.

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

J'espère que cela t'aides!

1
user1853243

Cela a corrigé mes icônes de police dans IIS: Ajouter un web.config à votre répertoire de polices avec le contenu suivant: 

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

J'ai eu le même problème avec Font Awesome 4.7 et IE 11. Je l'ai corrigé en ajoutant les informations méta suivantes dans la section <head>:

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

Dans mon cas, le fichier de police .eot était corrompu. J'en avais généré un nouveau (+ nouveaux styles .css) et le problème était résolu. Essayez-le 

0
Paweł Bednarczyk

Il se peut également que vos paramètres Internet Explorer empêchent le navigateur de télécharger des polices. Ce fut le cas sur l'un de nos serveurs étroitement sécurisés.

Essayez ces étapes:

  1. Ouvrez Internet Explorer
  2. Aller aux options Internet
  3. Sous l'onglet Sécurité, cliquez sur Personnaliser le niveau ...
  4. Faites défiler jusqu'à Téléchargements et assurez-vous que le téléchargement de polices est activé.

 enter image description here

0
E2rdo