You can control icons direction using the following CSS:
[dir=ltr].fa-dir-flip .fa.fa-flip-horizontal,
[dir=rtl].fa-dir-flip .fa,
[dir=rtl] .fa.fa-dir-flip {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
[dir=rtl].fa-dir-flip .fa-flip-horizontal,
[dir=ltr].fa-dir-flip .fa,
[dir=ltr] .fa.fa-dir-flip {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
:not([dir=rtl]) [dir=ltr] .fa.fa-dir-flip {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0)!important;
-webkit-transform: scale(1, 1)!important;
-ms-transform: scale(1, 1)!important;
transform: scale(1, 1)!important;
}
:not([dir=ltr]) [dir=rtl] .fa.fa-dir-flip {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)!important;
-webkit-transform: scale(-1, 1)!important;
-ms-transform: scale(-1, 1)!important;
transform: scale(-1, 1)!important;
}
It gives you the ability to do global and local flip for .fa
icons (live demo)
- Globally, add direction attribute
dir="rtl"
andfa-dir-flip
class:
```html
<html dir="rtl" class="fa-dir-flip">
.
.
<!-- this will be RTL -->
<span class="fa fa-arrow-left"></span>
.
.
<html>
```
- Locally, add direction attribute
dir="rtl"
to the container andfa-dir-flip
class to the icon you want to flip.
```html
<html dir="rtl">
.
.
<div dir="ltr">
<!-- this will be LTR, following the closest ancestor direction -->
<span class="fa fa-arrow-left fa-dir-flip"></span>
<!-- this will be RTL, falling back to the farthest ancestor direction -->
<span class="fa fa-arrow-left"></span>
</div>
.
.
</html>
```
@MohammadYounes do you have any recipe for the current font awesome? (5) ?