单击时旋转字体真棒 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 来定义函数 rotate()，该函数在按钮单击时调用。

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

Answer 2

您是否尝试过使用!important 进行轮换上课？如果你有 Bootstrap，它可以忽略你的 className，因为它已经在 Bootstrap 中定义了。