Одна иконка с двумя ссылками - PullRequest
Новая
       23

Одна иконка с двумя ссылками

0 голосов
/ 21 февраля 2019

Я делаю меню, которое должно выглядеть так: enter image description here, но моя проблема в последнем действии - аутентификация.Вот что я получаю: enter image description here.

Редактировать: Первое изображение довольно широкое и плохо вписывается в пространство, которое обеспечивает переполнение стека.Вот ссылка на это изображение, которая показывает, как ОП хочет, чтобы вещи выглядели.

Мой код: 

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

Пожалуйста, дайте мне подсказку, я понимаю, почему это происходит, но я не знаю, как решить эту проблему

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Это сработало для меня.Пожалуйста, смотрите живой пример ниже. 

.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>
0 голосов
/ 21 февраля 2019

Вы можете легко решить эту настройку значка внутри тега привязки, а также установить другую метку в 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;
}
...