My social media buttons do not appear correctly

I followed a YouTube video to learn how to make some cool Social Media Buttons.  I have tried copy & pasting his code, but they do not display correctly.  They have a hover feature but only the facebook one is showing the icon correctly and the colors.  Here are the sections of my code from the header and body.

<title>Social Media Icons | CodingMaker</title>
<style>

@1552174 url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
display: inline-block;
height: 45px;
width: 45px;
float: left;
margin: 0 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.wrapper .button:hover{
width: 200px;
}
.wrapper .button .icon{
display: inline-block;
height: 45px;
width: 45px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 45px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{background: #4267B2;}

.wrapper .button:nth-child(2):hover .icon{background: #1DA1F2;}

.wrapper .button:nth-child(3):hover .icon{background: #E1306C;}

.wrapper .button .icon i{
font-size: 25px;
line-height: 50px;
transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
color: #fff;

.wrapper .button span{
font-size: 20px;
font-weight: 500;
line-height: 50px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1)
span{color: #4267B2;}

.wrapper .button:nth-child(2)
span{color: #1DA1F2;}

.wrapper .button:nth-child(3)
span{color: #E1306C;}

</style>
<script src="https://kit.fontawesome.com/a076d05399.js>"></script>

******************

<div class="col-xl-2">
<div class="wrapper">
<div class="button">
<div class="icon"><i
class="fab fa-facebook-f">
</i></div>
<span>Facebook</span>
</div><br><br>

<div class="button">
<div class="icon"><i
class="fab fa-twitter">
</i></div>
<span>Twitter</span>
</div><br><br>

<div class="button">
<div class="icon"><i
class="fab fa-instagram">
</i></div>
<span>Instagram</span>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script type="text/javascript">
$(function() {
$( "#Slider1" ).slider();
});
</script>
</div></div></div></div></div>

Any guidance would be appreciated