Ребята, я застрял в создании верхней информационной панели, где я могу разместить все необходимые данные, такие как номер телефона, почтовый идентификатор и некоторые значки социальных сетей, и я использую Bootstrap 4.1.3 и Font-awesome 5.5, но всякий раз, когда я пытаюсь поставьте гиперссылку после иконки, она переходит к следующей строке Как правильно выровнять его в одну строку. Я перепробовал много методов, но пока не получил результатов.
Пожалуйста, проверьте код.
<!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>