html - 一个带有两个链接的 fa 图标

Question

我制作了一个如下所示的菜单:

但是最后一个 Action (Auth)有问题这就是我得到的:

.

第一张图片很宽，不适合 Stack Overflow 提供的空间。这是 that image ，它显示了 OP 希望事情看起来像什么。

我的代码:

.navbar-nav li a {
  display: inline-block;
  font-size: 18px;
  color: #d1d1d1;
  vertical-align: middle;
}

.navbar-nav li a:hover {
  color: #efa843;
}

.nav-item {
  margin-right: 32px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="header">
  <div class="container">
    <nav class="navbar navbar-expand">
      <div class="collapse navbar-collapse" id="header_menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
          </li>
          <li class="nav-item">
            <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>
            <a class="nav-link" href="#">Вход</a>
            <a class="nav-link" href="#">Регистрация</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

请指点一下，我明白为什么会这样，但我不知道如何解决这个问题

Answer 1

您可以轻松解决在 anchor 标记内设置图标并在 span 或 div 中设置其他标签的问题:

<a class="nav-link" href="#">
   <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>Вход
   <!-- Here you set the other label in the same link -->
   <span>Регистрация</span>
</a>

当链接悬停时，同样在 css 中，保持该 span 或 div 的颜色:

.navbar-nav li a:hover span{
  color: #d1d1d1;
}