More than one fas fa-bar

[benmorrison_1]

I have tried adding a fas fa-bar, the one I added on the navigation bar is set up to appear at a smaller resolution however, more than one fas fa-bar icon has appeared and I can't figure out why please help.
I have included the css and html code thanks in advance!

/* Reset some default styles */
body, ul {
    margin: 0;
    padding: 0;
}

/* Navigation bar styles */
.nav2 {
    background-color: #48abe0;
    box-shadow: 1 2px 5px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid #fff;
    box-shadow: 0 0 50px #48abe0;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    position: relative;
    transition: color 0.3s;
}
label.logo{
    color: white;
    font-size: 35px;
    line-height:80px;
    padding: 0 50px;
    font-weight: bold;
}

nav ul{
    float: right;
    margin-right: 20px;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a{
    color: #ffffff;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3xp;
}



/* Neon bar glow effect on hover */

.nav-item a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff; /* Neon green color */
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.3s, transform 0.3s;
}

.nav-item a:hover::before {
    opacity: 1;
    transform: scaleX(1);
}
.nav-item.clicked {
    transform: translateX(10px);
}

.checkbtn{
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}

#check{
    display: none;
}

@media (max-width: 952px){
    label.logo{
        font-size: 25px;
        padding-left: 50px;
}
    nav ul li a {
        font-size: 25px;
    }
}
@media (max-width: 858px){
    .checkbtn{
        display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    margin: 0;
    padding: 0;
    background: url('') center/cover no-repeat fixed;
    opacity: 1;
  }
</style>

<title>TemplateX</title>
  <link rel="stylesheet" href="nav.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>

<body>
    <nav class="nav2">
        <input type="checkbox" id="check">
            <label for="check" class="checkbtn">
                <i class ="fas fa-bars"><i/>
                </label>
                <label class ="logo">Template-X</label>
        <ul>
            <li class="nav-item"><a href="#">Home</a></li>
            <li class="nav-item"><a href="#">About</a></li>
            <li class="nav-item"><a href="#">Services</a></li>
            <li class="nav-item"><a href="#">Portfolio</a></li>
            <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

 

[Malcolm]

Hey, Welcome to Code Forum!

I believe you're seeing multiple icons due to a misplaced closing slash. The closing tag of the icon is in the wrong place.

See the example down below.

Example:

<i class ="fas fa-bars"><i/>

It should be like this:

<i class ="fas fa-bars"></i>

 

[benmorrison_1]

Thank you, I really appreciate this!