Login/Register
Font Awesome icon not displaying in Safari and iPad
Asked Answered
font-awesome
C

5

12

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

Chelseachelsey answered 17/4, 2015 at 10:27 Comment(3)
I am also having this problem, curious if you made any progress with it. I've tried both hosting it myself and the maxcdn version... – Denunciatory
We got the same problem, #30194115 – Teamster
I have opened a support ticket with Apple but so far they have only requested more information without any feedback about the problem. – Teamster
G
9

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.

Gillie answered 15/9, 2015 at 20:51 Comment(3)
I think this is a recent problem. It would work on desktop chrome, ipad. But would show squares on my iphone. A cache version reset as above fixed it. – Origan
Wickedly simple but effective solution. Great thinking. – Cytaster
This solved the issue for me, and I'm using the FontAwesome CDN for v5.7.2. – Truitt
V
5

<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.

Vilma answered 11/5, 2016 at 19:44 Comment(1)
This worked for me. Maybe this CDN doesn't cause the caching problem. – Singlephase
C
2

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; ?>
Chelseachelsey answered 12/8, 2015 at 9:16 Comment(1)
This worked for me. To be clear, it's defining the @font-face in the HTML, even though it's the same definition as (duplicated) in font-awesome.css, that fixes it. – Keelson
H
2

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");
          };
Hagiographa answered 1/9, 2017 at 3:11 Comment(0)
L
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" rel="stylesheet" />

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;
}
Landaulet answered 29/8, 2018 at 12:38 Comment(1)
Above code is 100% working with Safari 9+ and and IE, Firefox, Chrome, Safari – Landaulet

© 2022 - 2024 — McMap. All rights reserved.