Is it possible to rotate AND flip an icon?

Viewed 7326

I am using the fa-bar-chart icon, but I'd like to have the lines going from left-to-right with the x & y axis starting in the bottom left corner.

I thought I could pair both 'fa-rotate-90' and 'fa-flip-horizontal' to get there, but combining the two does not work:

<div>
<i class="fa fa-bar-chart"></i> normal<br>
<i class="fa fa-bar-chart fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-bar-chart fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-bar-chart fa-rotate-90 fa-flip-horizontal"></i> fa-rotate-90 AND fa-flip-horizontal<br>
</div>

https://jsfiddle.net/virtusts/Lmtdk5ot/

Any suggestions?

2 Answers

You can use this code for Flip :

.fa-flip-horizontal { 
  transform: scaleX(-1);
 }
Related