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

Question

我做了一个看起来像这样的菜单: ,但我在最后一次行动中的麻烦 - 认证.这就是我得到的:.

编辑:第一张图片很宽,不适合Stack Overflow提供的空间.这是该图像的链接,显示了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

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

\n\n

<a class="nav-link" href="#">\n   <i class="fas fa-user fa-2x" style="vertical-align: middle;"></i>\xd0\x92\xd1\x85\xd0\xbe\xd0\xb4\n   <!-- Here you set the other label in the same link -->\n   <span>\xd0\xa0\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8f</span>\n</a>\n

\n\n

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

\n\n

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

\n