MohammadYounes/Font-Awesome-RTL.md

## Font-Awesome-RTL.md

      
    Raw
  

              Font-Awesome-RTL.md
            
          
    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" and fa-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 and fa-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>
```