Menu
I have been using Font Awesome icons for a while now but after a round of bug tracking from an external company they found that the font awesome icons were not displaying in some instances.
Version of font awesome is 4.3.0
Versions not working in from external company: iPad4 (iOS 7.1.2) Safari 8.0.2 on Mac OS 10.10.x Safari 7.1.2 on Mac OS 10.9.x Safari 7.1.4 and 8.0.2 Safari Version 8.0.3 (10600.3.18) on Mac OS X 10.10.2 (14C109) iPad Air 2 with iOS 8.0.3
We have internally tested on: Safari 8.0.2
Problem sequence 1 - Login to website - Icons are visible - Log out, close browser, remove all website data, log back in - no icons / squares present
Problem sequence 2 - Login to website - Icons not visible at all / squares present
Website is on own dedicated server, using lamp. Not happening on FF, Chrome or even IE.
If anyone has had the same issue or knows a solution that works please help. We have looked and tried roughly 10 different things i.e. source ordering, updating css, using website link etc etc
468
We are facing same problem. Material icons loads perfectly fine in other browser except in iPad. It loads for the first time, and subsequent load, shows text instead of icon. Tried all solution like self hosting, calling google api and CDN. Nothing worked for us. Any help would be greatly appreciated. But when you refresh the page, the icon gets loaded..
Work around for this would be to forcefully reload the page during window load and when it is iPad. This should solve the problem.
var isTabLoaded = sessionStorage.getItem("isTabLoaded") == "true";
var isUserBrowserIPad = navigator.userAgent.indexOf('iPad') > -1
if (!isTabLoaded && isUserBrowserIPad) {
window.location.reload();
sessionStorage.setItem("isTabLoaded", "true");
};
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
put this code into your <head> </head>file, it will be fine. I guess some signature needed for safari from apple.
21
I was having the same problem on Mac OSX (Yosemite) + Safari 8.0.8 and various iOS 6 devices. I'm targeting Font Awesome 4.2.0, hosting locally on an IIS web server.
Oddly what I found was that suffixing the path to the Font Awesome CSS library with a cache buster fixed the issue. e.g.
font-awesome.min.css?v=1234
I don't understand why this would be necessary, but so far it appears to work.
41
We did find a way of doing this but it is a temporary solution. It may help some. We detect the browser version as Safari and pass the font-face 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; ?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With