Font awesome icon not working, only white box appears-CodePudding

So I've been trying to render a startup website (not an actual startup) and I'm currently adding 3 icons in a row in about the center of the page after the "about" div. The main problem here is that I'm not able to see the last font awesome icon I want to insert. The same problem happened with the middle icon, but I just selected another icon instead and thought that it might be some external problem. But for the last icon it is not working. There is a little bit of "dirty coding" in that container. But for now someone please fix my icon problem. Thanks in advance guys.

HTML code:

<!DOCTYPE html>
<html lang="en">

    <!-- META TAGS -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- FONT AWESOME -->
    <script src="https://kit.fontawesome.com/a2efd1781b.js" crossorigin="anonymous"></script>

    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">

    <!-- CSS LINK -->
    <link rel="stylesheet" href="css/style.css">
    <title>Stencil.io</title>
</head>
<body>

    <nav >
        <h1>stencil.io</h1>
            <div >
                <ul>
                    <li><a href="https://www.google.com">Google</a></li>
                    <li><a href="https://www.quora.com">Quora</a></li>
                    <li><a href="https://youtube.com">Youtube</a></li>
                </ul>
            </div>
    </nav>

    <header>
        <h1 >All your social media at one place.</h1>

        <div >
            <i ></i>
            <i ></i>
            <i ></i>
            <div >
                <i ></i>
                <i ></i>
            </div>
        </div>
    </header>
    <br><br><br><br>

    <div >
        <h3 >
            About Stencil
        </h3>
        <p >
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur sapiente quis commodi sint eos consectetur veniam doloremque esse libero! Quibusdam exercitationem quos possimus, ab facilis nobis quia vitae culpa error doloribus, aut tenetur a. Cum rerum dignissimos aliquam repellat cupiditate sunt enim eveniet asperiores. Itaque suscipit quod incidunt accusamus fugiat!
        </p>
    </div>

    <div > 
        <div >
            <i ></i><br>
            <p >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, minima.</p>
        </div>
        <div >
            <i ></i> 
            <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto repellat vitae expedita accusamus asperiores?</p>
        </div>
        <div >
            <i ></i>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, laudantium necessitatibus eveniet aliquam eum voluptatum?</p>
        </div>
     </div>
</body>
</html>

The icon in "message" div is not showing up. However the devtools of my browser suggest that the element exists and only a white box appears.

CSS stylesheet:

body{
    margin: 0;
}
nav{
    color: antiquewhite;
    position: sticky;
    right: 0;
}

h1{
    padding: 10px 20px;
}
ul{
    list-style: none;
}
li{
    padding: 10px;
    display: inline-block;
}
a{
    text-decoration: none;
    color: antiquewhite; 
}
a:hover{
    color: #FFD39A;
}
.title{
    font-family: "Rubik", sans-serif;
    width: 40%;
    margin: 150px 100px;
    float: left;
}
i{
    padding: 30px;
}
.icons{
    position: relative;
    top: 100px;
}

.tbc{
    position: relative;
    left: 83px;
    margin: -71px;
    margin-top: 6px;
}

.middle{
    text-align: center;
    color: white;
    margin-top: 200px;
    margin-bottom: 100px;
    padding: 50px 100px;
    border-radius: 25px;
}
.about{
    padding-bottom: 40px;
}
.middle2{
    text-align: center;
    margin-bottom: 100px;
}
.checkdiv{
    margin-right: 800px;
    text-align: center;
}
.check{
    margin-left: 50px;
}
.para{
    width: 70%;
    text-align: center;
    margin-left: 90px;
}
.bullseyediv{
    text-align: center;
    display: inline-block;
    width: 33%;
    margin-left: 82px;
    margin-top: -172px;
    position: relative;
    bottom: 39px;
}

.message{
    text-align: center;
}

CodePudding user response：

If you go to your fontawesome account and in kits tab click on your project and settings. Check if you are in Latest 6.X, if no, put in

CodePudding user response：

In not using the kit, this is an easy way using Font Awesome 6

<!-- font awesome 6 all -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" crossorigin="anonymous">

<!-- far = font awesome regular (free) -->
<i ></i>

<span style="padding-right: 20px"></span>

<!-- fas = font awesome solid (free) -->
<i ></i>

<span style="padding-right: 20px"></span>

<!-- fab = font awesome brands (free) -->
<i ></i>