как добавить цвет, когда моя ссылка (icofont) активна угловая в 4? - PullRequest
Новая
       8

как добавить цвет, когда моя ссылка (icofont) активна угловая в 4?

0 голосов
/ 30 апреля 2018 
<div>
  <div class="col-xl-12 col-lg-12  filter-bar">
    <nav class="navbar navbar-light bg-faded m-b-30">
      <ul class="nav navbar-nav pull-right" >
        <li class="nav-item">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab" aria-expanded="false" ngbTooltip="Dashboard"><i class="icofont icofont-chart-pie-alt"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link icon-list-demo active" data-toggle="tab" [routerLink]="['/franchise/customer/details/users']" role="tab" aria-expanded="false" ngbTooltip="Users"><i class="icofont icofont-users-alt-5"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item ">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/cabinets']" role="tab" aria-expanded="false" ngbTooltip="Cabinets"><i class="icofont icofont-cubes"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/inventory']" role="tab" aria-expanded="true" ngbTooltip="Inventory"><i class="icofont icofont-card"></i></a>
          <div class="slide"></div>
        </li>
      </ul>
    </nav>
  </div>
</div>

мой css 

.navbar-light .navbar-nav > .active > a > i,{
color: #64b0f2;
background-color: transparent;
}

Как выделить icofont, когда он активен, как вы можете видеть выше, у меня есть icofont внутри моей ссылки, я не могу изменить его цвет, когда он находится в активном состоянии

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Попробуйте использовать .navbar-light .navbar-nav > .active > a > i:after или .navbar-light .navbar-nav > .active > a > i:before Я думаю, ваша иконка создается с помощью css в параметрах after / before. И убедитесь, что у вас есть правильный путь к тегу, чтобы установить его активным.

0 голосов
/ 30 апреля 2018

угловой 4 маршрутизатор дает возможность добавить класс, когда ссылка активна, вот пример 

<a routerLink="/link" routerLinkActive="active">link</a>

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

...