zorro76
@zorro76

Как правильно поместить и взаимодействовать с иконками fontawesome?

Как правильно разместить иконки fontawesome (чтобы не задвоивать в коде)?
К примеру:
<div class="item inline-content gradebook-icon">
    <i class="fal fa-award" data-content-url="<%= gradebook_sidebar_path %>" title="Submissions and Grading"></i>
    <i class="fas fa-award" data-content-url="<%= gradebook_sidebar_path %>" title="Submissions and Grading"></i>
  </div>
<div class="item inline-content conversations-icon">
    <i class="fal fa-comments-alt" data-content-url="<%= conversations_path %>" title="Chat"></i>
    <i class="fas fa-comments-alt" data-content-url="<%= conversations_path %>" title="Chat"></i>
  </div>
<div class="item inline-content comments-icon">
     <i class="fal fa-comment-dots" data-content-url="<%= side_bar_comments_path %>" title="Comments"></i>
     <i class="fas fa-comment-dots" data-content-url="<%= side_bar_comments_path %>" title="Comments"></i>
  </div>

изначально видна только иконка с классом fal, и при клике на иконку - родителю item присваивается класс active соответственно иконка с классом fas стает display: block; а иконка fal display: none;
Меня смущает двойная запись в разметке, как это можно еще обыграть кошернее?
  • Вопрос задан
  • 87 просмотров
Решения вопроса 3
AntonLitvinenko
@AntonLitvinenko
HTML coder
Я бы менял класс fal на fas при смене класса у родителя через toggleClass
Ответ написан
FeST1VaL
@FeST1VaL
Тихий
> Тык <

Смена класса иконки
Ответ написан
kocherman
@kocherman
Конечно можно. Я даже не понимаю зачем классы fal и fas, когда к div.item добавляется класс active.
На мой взгляд, вместо дублирования верстки html, можно сделать дублирование одного правила CSS.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы