Rotate font awesome 90 icon on click

user_14621116 0
Viewed 1487

I've been trying to get my icon to rotate 90 on click. It's currently in a Bootstrap 4 FAQ collapse table. When the user clicks on the arrow and the card opens, the icon should rotate 90 degrees.

I've tried using this codepen example: http://jsfiddle.net/koala_dev/3v2egwfs/7/ and it does not work. Right now with the code as it is, the two arrows are next to each other. The example demonstrates what I'm looking for but 90 degrees rather than 180.

In my head, I have installed all.css, svg-with-js.css and svg-with-js.min.css

After reading a lot of documentation and watching a lot of tutorials it still is not working. I have my code below. Can anyone help?

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";
}
font-awesome jquery-animate css html
2 Answers

first please note that font awesome supports rotating icons: here are some examples:

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

so let's say you initially have this HTML:

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

now you will use some js to define the function rotate() which is called at the button click.

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

now all I did is setting the old class to a new class where the same icon is rotated 90 degrees. hope it works. for more about rotating Font Awesome Icons here are the docs https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons (;

user_78532280

Have you tried to use !important for class with rotation? If you have Bootstrap, it can ignore your className, because it's already defined in the Bootstrap.

user_127692010
Related