Solution 1 :

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

Solution 2 :

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.

Problem :

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


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

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


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


Comment posted by

looks like working to me if you add the class rotate

Comment posted by Fath

In case you dont want to use those classes you can have a define your own on css like ‘.my_class { transform: rotate(5.5deg); } then add it using javascript by using the Elem.classList.add(‘my_class’);

Comment posted by Elektra Murphy

Just tried that and it’s not working either! Thanks for the suggestion though

Comment posted by Dima Malko

the best way, to find why it is not working, is open developer console in browser, and look if YOUR class is used for the element, if you dont see it, find right way for your files. If you see it there, and its crossed out, it means other class is used for it. Maybe show screenshot of it, its easier to help then.