'CSS "Fas Fa-Bars" give no output

I know that there are other questions on StackOverflow about this but those solutions haven't worked out for me. I'm trying to create a responsive navbar with a cool icon. Midway, I tried to use a font awesome bar. I tried using the "Fas fa-bar" but it didn't work. Here's my code:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

    <title>Document</title>
</head>
<body>

    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="check-btn">
            <i class="fas fa-bars"></i>
        </label>
        <label class="logo">Aeotic</label>

        <ul>
            <li> <a class="active" href="#">Home</a> </li>
            <li> <a href="#">About</a> </li>
            <li> <a href="#">Contact</a> </li>
            <li> <a href="#">Services</a> </li>
            <li> <a href="#">Feedback</a> </li>
        </ul>
    </nav>

    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nunito', sans-serif;
        }

        nav {
            background: #0082e6;
            height: 80px;
            width: 100%;
        }

        label.logo {
            color: white;
            font-size: 35px;
            line-height: 80px;
            padding-left: 100px;
            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: white;
            text-transform: uppercase;
            padding: 7px 13px;
            border-radius: 3px;
        }

        a.active, a:hover {
            background: #1b9bff;
            transition: 0.5s;
        }

    </style>

</body>
</html>

Try running the code, the bar doesn't work properly.

cssiconsfont-awesomefavicon


Solution 1:[1]

Add "fa" before any kind of icon class you want to use from font-awesome, it works for me.

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

Solution 2:[2]

you use font awesome latest version v5.10.0

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Talha Hasan
Solution 2 Amanullha Zoha

Related Questions