Is it possible to rotate font awesome 5 icons on click?

Question

I would like to rotate an fontawesome 5 icon (which is in an panel) 180 degree on click.

<div class="panel panel-default">
    <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            <div class="panel-title clearfix">
                <span> Hello world</span>
                <i class="fas fa-chevron-down"></i>
              </div>
            </a>
          </div>

I'm using SVG + JS version of Font Awesome.

Answer 1

Here is my solution, It's not a perfect solution, as I had to add a id and click listener to the accordion-toggle class.

After that, I target the generated svg class .svg-inline--fa to toggle the chevron up and down classes.

var atag = document.querySelector('#atag');

atag.addEventListener('click', on_click);

function on_click() {
  var elem = document.querySelector('#atag .svg-inline--fa');
  elem.classList.toggle("fa-chevron-up");
  elem.classList.toggle("fa-chevron-down");
}

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <a class="accordion-toggle" id="atag" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      <div class="panel-title clearfix">
        <span> Hello world</span>
        <i class="fas fa-chevron-down "></i>
      </div>
    </a>
  </div>