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>

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

Answer 1

这是我的解决方案，这不是完美的解决方案，因为我必须添加一个id并单击accordion-toggle类的侦听器。

在那之后，我针对生成的svg类.svg-inline--fa来切换人字形上下类。

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个图标？

2 个答案: