font-awesome-rtl's Introduction

font-awesome-rtl

Make font-awesome play nicely on right-to-left websites

How to use

Load font-awesome.css
Load font-awesome-rtl.css
Add dir="rtl" to a suitable parent, such as <html dir="rtl">

What is supported

Reversible glyphs are reversed:

<i class="fa fa-bullhorn"></i> points left-to-right
<i class="fa fa-star-half"></i> left half of a star
<div dir="rtl">
	<i class="fa fa-bullhorn"></i> points right-to-left
	<i class="fa fa-star-half"></i> right half of a star
</div>

List icons appear in the correct place

<ul class="fa-ul">
	<li><i class="fa-li fa fa-check-square"></i> Check!
	<li><i class="fa-li fa fa-spinner fa-spin"></i> Spins clockwise
</ul>
<div dir="rtl">
	<ul class="fa-ul">
		<li><i class="fa-li fa fa-check-square"></i> Check!
		<li><i class="fa-li fa fa-spinner fa-spin"></i> Spins anti-clockwise
	</ul>
</div>

Start and end versions of all left and right arrows

<i class="fa fa-chevron-right"></i> points left-to-right
<i class="fa fa-chevron-left"></i> points right-to-left
<i class="fa fa-chevron-end"></i> points left-to-right
<i class="fa fa-chevron-start"></i> points right-to-left
<div dir="rtl">
	<i class="fa fa-chevron-right"></i> points left-to-right
	<i class="fa fa-chevron-left"></i> points right-to-left
	<i class="fa fa-chevron-end"></i> points right-to-left
	<i class="fa fa-chevron-start"></i> points left-to-right
</div>

Recommend Projects