html - 单击旋转 Font Awesome 90 图标

Question

我一直试图让我的图标在点击时旋转 90。它目前在 Bootstrap 4 FAQ 折叠表中。当用户单击箭头并打开卡片时，图标应旋转 90 度。
我试过使用这个 codepen 示例:http://jsfiddle.net/koala_dev/3v2egwfs/7/它不起作用。现在使用代码，两个箭头彼此相邻。该示例演示了我正在寻找的 90 度而不是 180 度。
在我的脑海中，我已经安装了 all.css、svg-with-js.css 和 svg-with-js.min.css
在阅读了大量文档并观看了大量教程后，它仍然无法正常工作。我在下面有我的代码。任何人都可以帮忙吗？
HTML

<div class="container" style="max-width: 960px;">

        <!--Accordion wrapper-->
        <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

            <!-- Accordion card -->
            <div class="card"
                style="border-top-right-radius: 0px; border-top-left-radius: 0px; border-top: 1px solid #D1C9C9; border-right: transparent; border-left: transparent;">

                <!-- Card header -->
                <div class="card-header" style="background-color: transparent" role="tab" id="headingOne1">
                    <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
                        aria-controls="collapseOne1">
                        <h5 class="mb-0" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 400; color: black;">
                            <i class="fas fa-angle-right rotate-icon" style="padding-right: 10px;"></i> Insert Question
                        </h5>
                    </a>
                </div>

                <!-- Card body -->
                <div id="collapseOne1" style="background-color: transparent" class="collapse" role="tabpanel"
                    aria-labelledby="headingOne1" data-parent="#accordionEx">
                    <div class="card-body" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 300;"> Insert content
                    </div>
                </div>

CSS

.accordion .fa-angle-right:after {
  content: "\f107";
}

Answer 1

首先请注意 font awesome 支持旋转图标:
这里有些例子:

# this is the one you are looking for fa-rotate-90 
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>

所以假设你最初有这个 HTML:

<i class="fas fa-snowboarding" id="my_icon"></i>
<button onclick="rotate()">Rotate me<button>

现在你将使用一些 js 来定义函数 旋转()在按钮单击时调用。

function rotate(){
    var myIcon = document.getElementById("my_icon");
    myIcon.setAttribute("class","fas fa-snowboarding fa-rotate-90");
}

现在我所做的就是将旧类设置为一个新类，其中相同的图标旋转 90 度。
希望它有效。
有关旋转 Font Awesome 图标的更多信息，请参阅文档 https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons
(;