是否可以在单击时旋转字体真棒 5 个图标？

Question

我想在点击时将 fontawesome 5 图标（位于面板中）旋转 180 度。

<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>

我正在使用 Font Awesome 的 SVG + JS 版本。

Answer 1

这是我的解决方案，这不是一个完美的解决方案，因为我必须向 accordion-toggle class.

添加一个 id 和点击侦听器

之后，我针对生成的 svg class .svg-inline--fa 上下切换人字形 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>

Answer 2

为了旋转 Font Awesome 5 图标，您需要操纵其内部 SVG 元素。

HTML

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

或 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');
}

注意：此解决方案假定使用 JQuery 和 Font Awesome 5

是否可以在单击时旋转字体真棒 5 个图标？

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

css

font-awesome-5