Как в fontawesome управлять иконкой через внешний блок?

Question

Если у блока класс active то иконка <i class="fas fa-star"></i> иначе <i class="fal fa-star"></i>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="marked">
  <i class="fal fa-star"></i>
</div>

<div class="marked active">
  <i class="fas fa-star"></i>
</div>

<div class="marked active">
  <i class="fa-star"></i>
</div>

Answer 1

Добавляем все нужные иконки, просто скрываем все те, которые в данный момент не нужны

.marked .fas {
    display: none;
}
.marked .fal {
    display: initial;
}
.marked.active .fas {
    display: initial;
}
.marked.active .fal {
    display: none;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">

<div class="marked">
    <i class="fas fa-star"></i>
    <i class="fal fa-star"></i>
</div>
<div class="marked active">
    <i class="fas fa-star"></i>
    <i class="fal fa-star"></i>
</div>

БЛОГ НА HUSL

Как в fontawesome управлять иконкой через внешний блок?

Ответы (1 шт):