而不是使用Fontawesome Unicode，我们如何使用Fontawesome类创建带有图标的手风琴？

Question

Currently I have this accordion that expands and collapses: https://jsfiddle.net/cliffeee/a5uxgkmt/15/ .

I want to use fontawesome to create the icons for the accordion. Right now, I am using Fontawesome unicodes(f067 , \\f068). However, I want to use Fontawesome classes instead such as this: https://fontawesome.com/icons/plus?style=solid
https://fontawesome.com/icons/minus?style=solid

I am wondering where in my jquery or cshtml can I add the fontawesome classes?

<i class="fas fa-plus" /i>
<i class="fas fa-minus" /i>

Answer 1

 var coll = document.getElementsByClassName("accordion-toggle"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function(evnt) { const currClassList = evnt.target.classList; if (currClassList.contains('collapsed')) { evnt.target.classList.remove("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-minus"); evnt.target.querySelector('.fa').classList.add("fa-plus"); var content = evnt.target.nextElementSibling; content.style.maxHeight = null; } else { for (var j = 0; j < coll.length; j++) { coll[j].classList.remove("collapsed") coll[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-plus"); evnt.target.querySelector('.fa').classList.add("fa-minus"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } } }); } 

 .accordion-toggle { background-color: #777; color: white; cursor: pointer; padding: 18px; width: calc(100% - 18px); border: none; text-align: left; outline: none; font-size: 15px; } .collapsed, .accordion-toggle:hover { background-color: #555; } .collapse { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .container { max-width:100%; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></h2> <div id="anyId" class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion-toggle">Open Section 1<i class="fa fa-plus pull-right"></i></h2> <div class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>