Font Awesome icon not displaying in Safari and iPad

前端未结

关注

 5  2286

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

相关标签:

5条回答

余生分开走

2020-12-14 04:57

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

0 讨论(0)

忘掉有多难

2020-12-14 05:03

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-12-14 05:10
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");
          };
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤城傲影

2020-12-14 05:14

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

0 讨论(0)

孤独总比滥情好

2020-12-14 05:15
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...