Sometime small things takes days of developers like using fontawsome took me about a full day while using it in rtl direction. Here is an easy fix for fontawsome on rtl layout or rtl direction like arabic, urdu, farsi, pashto etc. normally we use fontawsome on default direction which is ltr which works fine and looks very good but when we use it inside rtl then no icon is displayed.

Direction can be specified by attribute dir=”rtl” and via css direction: rtl; this will make the layout right to left for arabic, urdu, farsi and other languages.

I got this issue and tried different methods at last I have created a css file with additional css roles which should be placed after fontawsome.css like the following inside head section.

This file has css roles like the following if some new icon is missing when you are using you can find that icon class and code and add to this file.

it will render the icon same as in ltr direction, a demo snapshot is given below, At left side list has direction=ltr and at right side list has direction=rtl

you can download the file from my github repository using the following button
font-awsome-trl-fix.css

Please let me know if you have better and optimized solution for fontawsome on rtl layouts or directions, I will appropriate your effort.