font-awesome-rtl

Step one: add font-awesome-rtl.css after font-awesome.css.

<link rel="stylesheet" type="text/css" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="font-awesome-rtl.css">

Step two: add dir="rtl" to any parent element, such as <body>.

Reversible icons



Reversible icons inside dir="rtl"



Spinning icons
clockwise
Spinning icons inside dir="rtl"
anti/counter-clockwise
List icons
  • Foo
  • Bar
  • Baz
List icons inside dir="rtl"
  • Foo
  • Bar
  • Baz
Start and end aliases
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end
fa-arrow-circle-start
fa-arrow-circle-end
fa-arrow-circle-o-start
fa-arrow-circle-o-end
fa-arrow-start
fa-arrow-end
fa-caret-start
fa-caret-end
fa-caret-square-o-start / fa-toggle-start
fa-caret-square-o-end / fa-toggle-end
fa-chevron-circle-start
fa-chevron-circle-end
fa-chevron-start
fa-chevron-end
fa-hand-o-start
fa-hand-o-end
fa-long-arrow-start
fa-long-arrow-end
Start and end aliases inside dir="rtl"
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end
fa-arrow-circle-start
fa-arrow-circle-end
fa-arrow-circle-o-start
fa-arrow-circle-o-end
fa-arrow-start
fa-arrow-end
fa-caret-start
fa-caret-end
fa-caret-square-o-start / fa-toggle-start
fa-caret-square-o-end / fa-toggle-end
fa-chevron-circle-start
fa-chevron-circle-end
fa-chevron-start
fa-chevron-end
fa-hand-o-start
fa-hand-o-end
fa-long-arrow-start
fa-long-arrow-end
Nested changes of direction
  • Foo
  • Bar
  • Baz
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end
Nested changes of direction dir="rtl"
  • Foo
  • Bar
  • Baz
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end
Nested changes of direction dir="ltr"
  • Foo
  • Bar
  • Baz
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end
Nested changes of direction dir="rtl"
  • Foo
  • Bar
  • Baz
fa-angle-start
fa-angle-end
fa-angle-double-start
fa-angle-double-end