Reputation: 101
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?
Upvotes: 10
Views: 8728
Reputation: 785
You can use this code for Flip :
.fa-flip-horizontal {
transform: scaleX(-1);
}
Upvotes: 5