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.

Looks like this has been solved [here](https://stackoverflow.com/questions/26173376/rotate-font-awesome-icon-on-click) — brae, Aug 17 '18 at 19:42
it's the same logic but you need to apply rotation to the SVG that is generated to replace the `i` — Temani Afif, Aug 17 '18 at 19:49

E2rdo · Answer 1 · 2019-11-01T11:48:34.440

In order to rotate a Font Awesome 5 icon you need to manipulate its inner SVG element.

HTML

<i class="fas fa-chevron-up transition" onClick="toggleView(event)"></i>

or in Angular 8

<fa-icon icon="chevron-up" class="transition" (click)="toggleView($event)"></fa-icon>

CSS

.transition > svg {
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}

.flip-v { /* flip vertically 180 deg */
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

JavaScript

toggleView(event) {
    //currentTarget: icon
    //currentTarget.firstChild: inner SVG
    $(event.currentTarget.firstChild).toggleClass('flip-v');
}

Note: this solution assumes the use of JQuery and Font Awesome 5

score 1 · Accepted Answer · answered Aug 17 '18 at 20:27

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>

I like this simple idea, appreciated – Juri Aug 19 '18 at 20:28 — Juri, Aug 19 '18 at 20:28

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

2 Answers2