一个带有两个链接的 Font Awesome 图标

Question

我制作了一个菜单，它应该看起来像这样： 但是最后一个操作（Auth）有一个问题，这就是我得到的结果： 。

第一张图片很宽，不适合 Stack Overflow 提供的空间。在此处可以查看 OP 希望它看起来像什么： that image 以下是我的代码：

.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>

请给我一些提示，我知道为什么会发生这种情况，但不知道如何解决这个问题。

- Bif Lee

---

如果您能将第一张图片裁剪到与第一张相同的尺寸，那就更好了，这样我们就不必玩“找不同”的游戏了。另外，请解释一下您标题的含义。 - Heretic Monkey

Answer 1

只需在li标签中添加flex-shrink-0类即可

<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="flex-shrink-0 nav-item">
                <a class="nav-link" href="#"><i class="fas fa-heart fa-2x" style="vertical-align: middle;"></i> Мои желания</a>
              </li>
              <li class="flex-shrink-0 nav-item">
                <a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-2x" style="vertical-align: middle;"></i> Корзина</a>
              </li>
              <li class="flex-shrink-0 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>

- Ammad Amir

Answer 2

您可以轻松地解决这个问题，只需在锚点标签内设置图标，并在 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;
}

- Sergio Escudero

Answer 3

刚刚将“.navbar-nav li a:hover”选择器替换为“.navbar-nav li:hover a, .navbar-nav li:hover i”。

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

.navbar-nav li:hover a, .navbar-nav li:hover i{
  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>

- jepozdemir

Answer 4

我在你的代码中发现了一个小错误，这个解决方案非常有效。这段代码将帮助你。

使用这个

    .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;
    }
    .navbar-nav li label {
       display: inline-block;
       font-size: 18px;
       color: #d1d1d1;
       vertical-align: middle;
     }

   .navbar-nav li label:hover {
      color: #efa843;
   }
   .navbar-nav li label a{
      text-decoration: none;
    }
   
     

    <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">
               <label class="nav-link" ><i class="fas fa-user fa-2x"></i>
                <span><a href="#">Вход</a></span>
              <span><a href="#">Регистрация</a></span>
                </label>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

我所做的更改

我将在账户图标前添加一个标签，并为该标签制作单独的CSS。

如果您对此答案不满意或此解决方案无法正常工作，请告知我。

希望这能帮到您，谢谢。

- user12085130

Answer 5

这对我有用。请参见下面的实时示例。

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

.btnText span a {
  font-size: 12px;
  color: #ccc;
  display: block;
}

.navbar-nav li a:hover,
.btnText span a:hover {
  color: #efa843;
  text-decoration: none;
}

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

.btnText {
  vertical-align: middle;
  display: inline-block;
  padding-left: 5px;
}

.icon {
  color: #D1D1D1;
}

#parent_element:hover>.icon {
  color: #efa843;
}

<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>

          <div id="parent_element">
            <i class="fas fa-user fa-2x icon" style="vertical-align: middle; display: inline-block;"></i>
            <div class="btnText">
              <span><a href="#">Вход</a></span>
              <span><a href="#">Регистрация</a></span>
            </div>
          </div>

        </ul>
      </div>
    </nav>
  </div>
</div>

- Penny Liu