Hey everyone, I'm having some trouble creating a top info bar in Bootstrap 4.1.3 with Font-awesome 5.5. I want to include essential details like phone number, email address, and social icons, but whenever I try to add a hyperlink after the icon, it drops down to the next line. I've tried multiple methods but haven't had any success aligning it properly in one line.
Could someone please take a look at my code?
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anything</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top-info d-sm-none d-md-block">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
</ul>
</div>
<div class="col-md-4">
<i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>