FontAwesomeが四角になって表示されない

前提・実現したいこと

FontAwesomeを使用して、snsのアイコンを表示させたいのですが、□になってちゃんと表示されません。

htmlで記載しているので、fontfamilyとかは考慮しなくてもいいと考えています。

ちなみにfontweightやfontsizeを変更してもかわりませんでした。

どこでエラーが起こっているのかわからないので、コードを全て載せますが、
アイコンの記載は一番下のfooterの所です。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>My Portfolio</title>
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
9    <link rel="stylesheet" href="styles.css">
10    <script src="main.js" defer></script>
11</head>
12<body>
13    <header class="header">
14        <div class="header-title">
15            <h1>Takuya Nemoto</h1>
16            <h2>Who Am I ?</h2>
17        </div>
18        <div class="header-logo">
19            <nav class="header-link">
20                <a href="#">Home</a>
21                <a href="#about">About</a>
22                <a href="#projects">Projects</a>
23            </nav>
24            <h2>Takuya Nemoto</h2>
25        </div>      
26    </header>
27    <section class="hero">
28        <div class="hero-title">
29            <h2>Takuya Nemoto</h2>
30            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> 
31                Quibusdam tenetur iste repellendus ab recusandae? <br>
32                 Iste est culpa quia repudiandae! Adipisci.</p>
33        </div>
34        <div class="hero-button">
35            <button class="hero-btn"><a href="#about">About Me</a></button>
36        </div>
37
38    </section>
39    <section class="about" id="about">
40        <h2>About me</h2>
41        <div class="about-intro">
42            <div class="about-img">
43                <img src="./images/takuya.about.jpg" alt="" class="img">
44                <h4>Takuya Nemoto</h4>
45            </div>
46            <div class="about-text">
47                <p>Lorem ipsum dolor sit amet consectetur <br>
48                     adipisicing elit.  Consectetur, asperiores. <br>
49                    Lorem ipsum dolor sit amet.</p>
50            </div>
51        </div>
52
53    </section>
54    <section class="projects" id="projects">
55        <h2>Projects</h2>
56        <div class="projects-container">
57            <div class="project-card">
58                <img src="./images/to-doList.png" alt="Project One Image" class="project-image">
59                <h3>Project One</h3>
60                <p class="subtext">This is my project and some text about it. I enjoyed making it.</p>
61                <hr/>
62                <p class="subtext"><a class="project-link" href="https://github.com/Takuyawe">View here</a></p>
63            </div>
64            <div class="project-card">
65                <img src="./images/expensetracker.png" alt="Project Tne Image" class="project-image">
66                <h3>Project Two</h3>
67                <p class="subtext">This is my project and some text about it. I enjoyed making it.</p>
68                <hr/>
69                <p class="subtext"><a class="project-link" href="https://github.com/Takuyawe">View here</a></p>
70
71            </div>
72            <div class="project-card">
73                <img src="./images/memorytest.png" alt="Project Three Image" class="project-image">
74                <h3>Project Three</h3>
75                <p class="subtext">This is my project and some text about it. I enjoyed making it.</p>
76                <hr/>
77                <p class="subtext"><a class="project-link" href="https://github.com/Takuyawe">View here</a></p>
78
79            </div>
80            <div class="project-card">
81                <img src="./images/gomoku.png" alt="Project Four Image" class="project-image">
82                <h3>Project Four</h3>
83                <p class="subtext">This is my project and some text about it. I enjoyed making it.</p>
84                <hr/>
85                <p class="subtext"><a class="project-link" href="https://github.com/Takuyawe">View here</a></p>
86
87            </div>
88        </div>
89    </section>
90    <footer class="footer" id="footer">
91        <div class="footer-title">
92            <h2>Contact Me</h2>
93        </div>
94        <div class="footer-form">
95            <form action="https://formsubmit.co/takuslugger200@gmail.com" method="POST">
96                <label for="name">
97                    Name :
98                    <input type="text" name="name" placeholder="name" required>
99                </label>
100                <label for="email">
101                    Email :
102                    <input type="email" name="email" placeholder="email-address" required>
103                </label>
104                <label for="text">
105                    <textarea name="text" id="text" placeholder="Ask me anything !" cols="70" rows="10"></textarea>
106                </label>
107                <button type="submit">Send</button>
108            </form>
109        </div>
110        <div class="footer-info-title">
111            <h2>My Information</h2>
112            <div class="footer-info">
113            <div class="left-info">
114                <div class="info-name">
115                    <h4>Name : </h4>
116                    <h4>Takuya Nemoto</h4>
117                </div>
118                <div class="info-status">
119                    <h4>Occupation : </h4>
120                    <h4>University Student</h4>
121                </div>
122                <div class="info-future">
123                    <h4>Graduation : </h4>
124                    <h4>March, 2022</h4>
125                </div>
126            </div>
127            <div class="right-info">
128                <h4>My Contact Address</h4>
129                <div class="info-app">
130                    <span class="instagram">
131                        <i class="fab fa-instagram"></i>
132                    </span>
133                    <span class="facebook">
134                        <i class="fab fa-facebook-square"></i>
135                    </span>
136                    <span class="line">
137                        <i class="fab fa-line"></i>
138                    </span>
139                </div>
140            </div>
141        </div>
142        </div>
143        
144        
145    </footer>
146
147    
148</body>
149</html>