CODEWITHSUNDEEP
font-awesome
Dan
Dan

Reputation: 101

Is it possible to rotate AND flip an icon?

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

Answers (2)

mohamad
mohamad

Reputation: 785

You can use this code for Flip :

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

Upvotes: 5

Sandman
Sandman

Reputation: 2307

Using the following CSS:

.fa-bar-chart {
  transform: rotate(90deg) scaleX(-1);
}

produces the desired outcome (bars left to right with left y axis).

Modified your JSFiddle to show the outcome.

Upvotes: 8

Related Questions