<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>
<style>
* {
padding: 0;
margin: 0;
}
nav {
padding: 20px;
background-color: #809906;
list-style: none;
border-bottom: 2px solid black;
}
a {
color: black;
padding-right: 115px;
}
a:hover {
color: hotpink;
}
</style>
</head>
<body>
<nav>
<a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
<a href="#"><i class="fa-solid fa-house"></i></a>
<a href="#"><i class="fa-solid fa-user"></i></a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</body>
</html>
I tried various methods like flexbox to center the icons in navbar but it didn’t work. I am trying to position all the icons to the center of the navbar. I am new in this filed.
New contributor
user25026034 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.