One Font awesome icon not showing, despite others that do - html

Question

I wanted to add a certain font awesome icon (fa-arrow-alt-circle-down), but it's not showing. I copied the classes from the website and entered them in my HTML. I tried other icons before and there was no issue with them. Sometimes I change .far to .fa, but now that doesn't work either. Can someone see why?
<div class="jumbotron jumbotron-fluid">
<h1 class="heading-primary heading-primary--main"> Wizard's unite fans</h1>
<div class="navigation-container">
<button class="find-locals-nav-btn">Find Local players</button>
<button class="forum-nav-btn">Forum</button>
<button>login / register</button>
</div>
<i class="far fa-arrow-alt-circle-down"></i>
</div>
SCSS file
.jumbotron {
height: 100vh;
background-image: linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
), url("https://i.amz.mshcdn.com/-7R3bLC1xTVhrjc86pBeYAogXFY=/950x534/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fcard%2Fimage%2F760683%2F2117d274-d2cf-46b9-b60c-698d65361438.jpg");
background-size: cover;
position: relative;
padding: 5rem;
margin-bottom: 2rem;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.heading-primary {
opacity: .8;
}
#include respond(phone) {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
background-position: center top;
}
.navigation-container {
border-radius: 20px;
background-color: #fff;
font-size: 2rem;
width: 70%;
margin: 4rem auto 0 auto;
display: flex;
text-align: center;
justify-content: center;
padding: 1rem;
background-image: linear-gradient(to bottom right, #ccc, #666);
> * {
background-color: transparent;
border: none;
flex: 1 0 0;
cursor: pointer;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
&:hover {
transform: translateY(-.2rem);
}
&:not(:last-child) {
border-right: 1px solid #444;
}
}
}
.fa-arrow-alt-circle-down {
font-size: 4rem;
color: #fff;
}
}

Answer 1

.fa Font Awesome are v4. .far are v5.
For all icons existing in both, changing far to fa will do the trick. For the ones added in v5, obviously, it won't, as they do not exist in v4.
You can view all v4.7 icons here.
For future notice, finding version specific FA icons is by searching for "font awesome x.x cheatsheet". Replace x.x with the proper version.