Statically Rotate Font-Awesome Icons

Statically rotate font-awesome icons

Before FontAwesome 5:

The standard declarations just contain .fa-rotate-90, .fa-rotate-180 and .fa-rotate-270.
However you can easily create your own:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

With FontAwesome 5:

You can use what’s so called “Power Transforms”. Example:

<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate--30"></i>

You need to add the data-fa-transform attribute with the value of rotate- and your desired rotation in degrees.

Source: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Is it possible to rotate font awesome 5 icons on click?

Here is my solution, It's not a perfect solution, as I had to add a id and click listener to the accordion-toggle class.

After that, I target the generated svg class .svg-inline--fa to toggle the chevron up and down classes.

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>

Rotate Font-Awesome Icon 180deg Inside Dropdown Button

Actually, you can do it with bootstrap Class.You don't have to write extra jquery code.

Did you notice that when the dropdown is open it has an extra class (open)?
So when .dropdown has class .open(like .dropdown.open) then you add extra rule to the .icon-rotates (like .dropdown.open .icon-rotates).

.icon-rotates {  -moz-transition: all 1s linear;  -webkit-transition: all 1s linear;  transition: all 1s linear;}
.icon-rotates.rotate {  -moz-transition: rotate(180deg);  -webkit-transition: rotate(180deg);  transition: rotate(180deg);}

.dropdown.open .icon-rotates {  -webkit-transform: rotate(180deg);  transform: rotate(180deg);}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown">  <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a>  <ul class="dropdown-menu" aria-labelledby="dropdown1">   <li><a href="#">Action</a></li>   <li><a href="#">Another action</a></li>   <li><a href="#">Something else here</a></li>   <li role="separator" class="divider"></li>   <li><a href="#">Separated link</a></li>  </ul>
 </div>

Why does fa-rotate-90 icons appear blurry in Chrome?

The font-awesome CSS define a CSS rule that causes this issue.

.fa {
    line-height: 1;
}

After removing this rule, the icon display very well.

Icons of font awesome sometimes become squares, and most of the time load correctly

Open your style.css and link to FontAwesome using font-face:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Just make sure to edit the paths if they are any different.

---

Related Topics