javascript - 是否可以在 CSS 中使用图标类

Question

我有展开和折叠 Accordion 。我在 CSS 中使用字体 awesome plus 和 minus unicode 来显示图标。我想知道是否可以使用很棒的字体类来代替显示图标？

CSS:
.accordion-toggle {
  background-color: #777;
}

.collapsed, .accordion-toggle:hover {
  background-color: #555;
}

Answer 1

添加额外的类名 far fa-minus fa-plus 到类 accordion-toggle 的元素。将是这样的“accordion-toggle far fa-minus fa-plus”。然后你可以切换类 fa-plus

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("fa-plus");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}