Шрифт Awesome значок не отображается в Safari и iPad

Я уже давно использую значки Font Awesome, но после раунда отслеживания ошибок от внешней компании они обнаружили, что в некоторых случаях шрифт awesome icons не отображался.

Версия шрифта awesome равна 4.3.0

Версии, не работающие с внешней компанией: iPad4 (iOS 7.1.2) Safari 8.0.2 на Mac OS 10.10.x Safari 7.1.2 на Mac OS 10.9.x Safari 7.1.4 и 8.0.2 Версия Safari версии 8.0.3 (10600.3.18) в Mac OS X 10.10.2 (14C109) iPad Air 2 с iOS 8.0.3

Мы внутренне протестировали: Safari 8.0.2

Последовательность задач 1 - Войти на сайт - Иконы видны - выйти, закрыть браузер, удалить все данные веб-сайта, войти в систему - нет значков/квадратов в настоящее время

Последовательность проблем 2 - Войти на сайт - Значки, которые не отображаются вообще/квадраты, присутствуют

Веб-сайт находится на собственном выделенном сервере, используя лампу. Не происходит в FF, Chrome или даже в IE.

Если у кого-то была такая же проблема или вы знаете, какое решение работает, пожалуйста, помогите. Мы посмотрели и попробовали примерно 10 разных вещей, например, упорядочивание исходного кода, обновление css, использование ссылки на сайт и т.д. И т.д.

Ответ 1

У меня была такая же проблема с Mac OSX (Yosemite) + Safari 8.0.8 и различными устройствами iOS 6. Я ориентирую Font Awesome 4.2.0, размещая локально на веб-сервере IIS.

Как ни странно, я обнаружил, что суффикс пути к библиотеке шрифтов Awesome CSS с кеш-битом исправил проблему. например.

font-awesome.min.css?v=1234

Я не понимаю, почему это было необходимо, но пока это работает.

Ответ 2

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" /> поместите этот код в свой <head> </head> файл, все будет хорошо. Я предполагаю, что для сафари из яблока нужна подпись.

Ответ 3

Мы нашли способ сделать это, но это временное решение. Это может помочь некоторым. Мы обнаруживаем версию браузера как Safari и передаем шрифт-шрифт inline:

<?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; ?>

Ответ 4

Мы сталкиваемся с такой же проблемой. Значки материалов загружаются отлично в другом браузере, кроме iPad. Он загружается в первый раз, а последующая загрузка показывает текст вместо значка. Пробовал все решения, такие как самостоятельный хостинг, вызывая google api и CDN. Ничто не сработало для нас. Любая помощь будет принята с благодарностью. Но когда вы обновляете страницу, значок загружается.

Работаем для этого, чтобы принудительно перезагрузить страницу во время загрузки окна и когда это iPad. Это должно решить проблему.

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