Font-awesome: Cannot combine multiple transformations

[mattaze]

Surprised but could not find any tickets requesting combining Rotate and Flip classes. The Flip transform is only used. Unless some other class for doing this that not listed in examples?

checked with version 4.7.0

following example
<i class="fa fa-bar-chart fa-rotate-90 fa-flip-horizontal"></i>

So as CSS is, fa-flip-x transform replaces the fa-rotate transform css.

only thing i can think at the moment would be some 20+ class combos like
.fa-rotate-90.fa-flip-horizontal { transform: rotate(90deg) scaleX(-1); }

[jhpratt]

The problem that would arise with this is that classes don't care about order the same was transform does. In transform, the order is how they are executed. With classes, fa-rotate-90 fa-flip-horizontal is indistinguishable from fa-flip-horizontal fa-rotate-90, which obviously has different results.

[tagliala]

@jhpratt thanks

Here it is a plain css example of the issue: https://jsfiddle.net/tagliala/exwf52L0/

[jhpratt]

That's exactly what I was trying to explain, albeit somewhat poorly. Of course, if a "standard" is put forth that rotations come before flips (or vice versa), the problem is resolved, but then you're relying on the end user to implement it in that order.

[tagliala]

We could document this in a wiki instead of adding 12 classes (at least, maybe more?).

Possible workaround:

<span class="fa fa-rotate-90">
  <span class="fa fa-home fa-flip-horizontal"></span>
</span>

<span class="fa fa-flip-horizontal">
  <span class="fa fa-home fa-rotate-90"></span>
</span>

(or custom css)

https://jsfiddle.net/tagliala/s3msxtbe/1/

[mattaze]

Oh, I didn't think to try "fa fa-rotate-90" on an outer element. That is plenty good.

[nonplus]

FA should add transformations that allow flipping along the diagonal axes, e.g.:

.fa-flip-tr2bl, .fa-flip-bl2tr {
  transform: rotate(-90deg) scaleX(-1);
}

.fa-flip-tl2br, .fa-flip-br2tl {
  transform: rotate(90deg) scaleX(-1);
}

https://jsfiddle.net/nonplus/25286wvq/

[jhpratt]

What icons would this be useful for?

[nonplus]

I use it for the key icon.

[jhpratt]

Sure, but that's literally one icon. I just done see FA implementing this, as the use case seems minimal.

[nonplus]

Well, the question came up. :-) It could be useful for any asymmetrical icon that makes sense being used horizontally or vertically.

There probably aren't all that many icons where this is applicable. The following are some examples:

key, unlock, cutlery, hand-, thumb-, drivers-license, mail-*