スマートフォン(iphone8, iOS12.1 safari)でFontAwsomeのアイコンが表示されない

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
11    <link rel="stylesheet" href="css/style.css">
12    <title>gaku's portfolio</title>
13  </head>
14  <body>
15    <section id="skills">
16        <h1 class="text-center mb-5">Skills</h1>
17        <div class="container-fluid">
18          <div class="row text-center font-weight-lighter mt-5">
19            <div class="col-xs-12 col-sm-4 col-md-3 my-3">
20              <i class="fab fa-html5 fa-5x mb-2"></i>
21              <h5>HTML5</h5>
22              <p>経験: 2ヵ月</p>
23            </div>
24            <div class="col-xs-12 col-sm-4 col-md-3 my-3">
25              <i class="fab fa-css3-alt fa-5x mb-2"></i>
26              <h5>CSS</h5>
27              <p>経験: 2ヵ月</p>
28            </div>
29            <div class="col-xs-12 col-sm-4 col-md-3 my-3">
30              <i class="fab fa-php fa-5x mb-2"> </i>
31              <h5>PHP</h5>
32              <p>経験: 1ヵ月</p>
33            </div>
34            <div class="col-xs-12 col-sm-4 col-md-3 my-3">
35              <i class="fab fa-js-square fa-5x mb-2"></i>
36              <h5>JavaScript</h5>
37              <p>経験: 1ヵ月</p>
38            </div>
39            <div class="col-xs-12 col-sm-4 col-md-4 my-3">
40              <i class="far fa-gem fa-5x mb-2"></i>
41              <h5>Ruby</h5>
42              <p>経験: 1ヵ月</p>
43            </div>
44            <div class="col-xs-12 col-sm-4 col-md-4 my-3">
45              <i class="fas fa-bold fa-5x mb-2"></i>
46              <h5>Bootstrap</h5>
47              <p>経験: 1ヵ月</p>
48            </div>
49            <div class="col-xs-12 col-sm-4 col-md-4 my-3">
50              <i class="fab fa-wordpress fa-5x mb-2"></i>
51              <h5>Wordpress</h5>
52              <p>学習中</p>
53            </div>
54          </div>
55        </div>
56      </section>
57  </body>
58

CSS
1.fa-html5 {
2  color: #FF9999;
3}
4
5.fa-js-square {
6  color: #FFCC33;
7}
8
9.fa-css3-alt {
10  color: #0099FF;
11}
12
13.fa-php {
14  color: #3366CC;
15}
16
17.fa-gem {
18  color: #FF0000;
19}

PC上では表示されるFontAwsomeのアイコンが、iphoneのsafariでは表示されません。
iphoneではキャッシュクリアも行ったのですがダメでした。また、CSSのファイルでFontAwsomeをインポートするといことも試してみたのですがこれもダメでした。ご意見いただけるとありがたいです。
※body, css の内容は一部省いています。