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

Question

[sergey]

Как правильно разместить иконки 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;
Меня смущает двойная запись в разметке, как это можно еще обыграть кошернее?

Answer 1

[Антон Литвиненко]

Я бы менял класс fal на fas при смене класса у родителя через toggleClass

Answer 2

[FeST1VaL]

> Тык <

Смена класса иконки

Comments

[sergey]

интерессный варант но как быть в этом случае с 5 разными иконками

[FeST1VaL]

sergey, так разницы нету вообщем-то... У вас же всегда меняется 2 класса? fal и fas. Делаете на общий класс item т.е селектор .item i

[sergey]

Артем Будин,

$('item i').on('click', function (e) {
e.preventDefault();
var item = $(this).parent();

if (item.hasClass('active')) {
  $(this).removeClass('fal').addClass('fas');
} else {
	$(this).removeClass('fas').addClass('fal');
}
});

[kocherman]

$('item').on('click', function (e) {
  $(this).find('i').toggleClass('fal').toggleClass('fas');
});

Answer 3

[kocherman]

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

Comments

[sergey]

классы fal и fas это внутрение классы иконок fontqwesome https://fontawesome.com/icons/comment-dots?style=light

[sergey]

'Конечно можно. ' - как например?

[kocherman]

sergey, Да я не совсем понимаю, чего вы хотите добиться, используя два разных шрифта на одни и теже иконки. А так я имел в виду. если вы добавляете к div.item класс active, то с той же легкостью можно поменять класс fal на fas в теге с картинкой

[sergey]

еще вопрос: toggleClass работает - но что если делая клик по другой иконке я хочу автоматически менять статус на предыдущий в первой иконки? Сейчас так не происходит - смена иконок только по клику на саму себя

[kocherman]

sergey, надо слушать другие события, вместо click, например, focus и blur (на оба события один обработчик)

[kocherman]

sergey, Но по уму будет сделать без JS вообще, задача то CSS-ная.