Шрифт 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");
};