Police Génial icône ne s'affichent pas dans Safari et iPad

J'ai été en utilisant la Police Impressionnant icônes pour un certain temps maintenant, mais après un tour de suivi des bogues à partir d'une entreprise extérieure, ils ont constaté que la police génial icones ne s'affichent pas dans certains cas.

Version de la police, c'est 4.3.0

Versions ne fonctionne pas en externe de l'entreprise:
iPad4 (iOS 7.1.2)
Safari 8.0.2 sur Mac OS 10.10.x
Safari 7.1.2 sur Mac OS 10.9.x
Safari 7.1.4 et 8.0.2
Safari Version 8.0.3 (10600.3.18) sur Mac OS X 10.10.2 (14C109)
l'iPad Air 2 avec iOS 8.0.3

Nous avons testé en interne sur:
Safari 8.0.2

Problème de la séquence 1
- Connectez-vous au site web
- Les icônes sont visibles
- Déconnectez-vous, fermez le navigateur, supprimer toutes les données du site web, ouvrez-la de nouveau - pas d'icônes /places présents

Problème de la séquence 2
- Connectez-vous au site web
- Les icônes ne sont pas visibles à tous /places présents

Site est sur son propre serveur dédié, à l'aide de la lampe. Ne se passe pas sur FF, Chrome ou encore internet explorer.

Si quelqu'un a eu le même problème ou connait une solution qui fonctionne s'il vous plaît aider. Nous avons regardé et essayé à peu près 10 choses différentes, c'est à dire la source de la commande, la mise à jour de css, à l'aide de lien de site web etc etc

J'ai aussi eu ce problème, curieux de savoir si vous avez fait des progrès avec elle. J'ai essayé les deux, l'hébergement de moi-même et de la maxcdn version...
Nous avons eu le même problème, stackoverflow.com/questions/30193615/...
J'ai ouvert un ticket de support avec Apple mais jusqu'à présent, ils n'ont qu'a demandé plus d'informations sans les commentaires sur le problème.

OriginalL'auteur Simon Clark | 2015-04-17

  1. 8

    J'ai eu le même problème sur Mac OS x (Yosemite) + Safari 8.0.8 et diverses iOS 6 appareils. Je suis ciblage de Police Génial 4.2.0, l'hébergement en local sur un serveur web IIS.

    Bizarrement ce que j'ai trouvé était que les suffixant le chemin d'accès à la Police Génial CSS bibliothèque avec un cache buster résolu le problème. par exemple,

    font-awesome.min.css?v=1234

    Je ne comprends pas pourquoi ce serait nécessaire, mais jusqu'à présent, il semble fonctionner.

    Je pense que c'est un problème récent. Il serait de travailler sur le bureau de chrome, ipad. Mais ne montrent carrés sur mon iphone. Un cache version remise à zéro comme ci-dessus fixé.
    Le mal, une solution simple mais efficace. Une grande pensée.

    OriginalL'auteur

  2. 4

    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" type="text/css" />
    mettez ce code dans votre <head> </head>fichier, il fera beau. Je suppose que certains de signature nécessaire pour safari d'apple.

    Cela a fonctionné pour moi. Peut-être que cela CA ne cause pas le problème de mise en cache.

    OriginalL'auteur

  3. 3

    Nous avons trouvé un moyen de le faire, mais c'est une solution temporaire. Il peut aider certains. Nous détecter la version du navigateur que Safari et passer le font-face en ligne:

    <?php
    //ugly workaround for fontawesome issue in Safari
    $ua = $_SERVER["HTTP_USER_AGENT"];
    $safariorchrome = strpos($ua, 'Safari') ? true : false;
    $chrome = strpos($ua, 'Chrome') ? true : false;
    if ($safariorchrome == true AND $chrome == false):
    ?>
    <style type="text/css">
         @font-face{font-family:'FontAwesome';src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?v=4.3.0');src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('/css/current-font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
    </style>
    <?php endif; ?>
    Cela a fonctionné pour moi. Pour être clair, c'est la définition de la @font-face dans le code HTML, même si c'est la même définition que (dupliqué) à font-awesome.css, qu'il fixe.

    OriginalL'auteur

  4. 1

    Nous sommes confrontés à un même problème. Matériel icônes des charges parfaitement bien dans d'autres navigateurs sauf dans l'iPad. Il charge pour la première fois, et à la suite de la charge, du texte au lieu de l'icône. Essayé tous les solution, comme l'hébergement, l'appel de l'api google et CDN. Rien n'a fonctionné pour nous. Toute aide serait grandement appréciée. Mais lorsque vous actualisez la page, l'icône est chargé..

    Contourner ce serait à force de recharger la page au cours de la fenêtre de charger et quand il est l'iPad. Ceci devrait résoudre le problème.

     var isTabLoaded = sessionStorage.getItem("isTabLoaded") == "true";
          var isUserBrowserIPad = navigator.userAgent.indexOf('iPad') > -1
          if (!isTabLoaded && isUserBrowserIPad) {
            window.location.reload();
            sessionStorage.setItem("isTabLoaded", "true");
          };

    OriginalL'auteur

  5. 0
    Step 1- Give fontawesome.css link in proper formate. - like type and rel

<link type="text/css" href="~/Content/font-awesome.css?v=1234"  />

Step 2-Some Changes in fontawesome css.

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype');
    src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit; 
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    Au-dessus de code est 100% de travail avec Safari 9+ et et IE, Firefox, Chrome, Safari

    OriginalL'auteur