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.
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>