Here we will learn directional icons in font awesome with examples and different type of directional icons (arrows, circle arrow, caret icons, chevron hand icons, long arrow and toogle) in font awesome with examples.
Font awesome providers different type of directional icons like arrow up / down, arrow left, arrow right, caret up / down / left / right icons, hand icons, long arrow and toggle icons, etc.
Following table shows list of available directional icons in font awesome icons library.
| Name | Usage Description | Icon | Example |
|---|---|---|---|
| angle-double-down | <i class="fa fa-angle-double-down"></i> | DEMO | |
| angle-double-left | <i class="fa fa-angle-double-left"></i> | DEMO | |
| angle-double-right | <i class="fa fa-angle-double-right"></i> | DEMO | |
| angle-double-up | <i class="fa fa-angle-double-up"></i> | DEMO | |
| angle-down | <i class="fa fa-angle-down"></i> | DEMO | |
| angle-left | <i class="fa fa-angle-left"></i> | DEMO | |
| angle-right | <i class="fa fa-angle-right"></i> | DEMO | |
| angle-up | <i class="fa fa-angle-up"></i> | DEMO | |
| arrow-circle-down | <i class="fa fa-arrow-circle-down"></i> | DEMO | |
| arrow-circle-left | <i class="fa fa-arrow-circle-left"></i> | DEMO | |
| arrow-circle-right | <i class="fa fa-arrow-circle-right"></i> | DEMO | |
| arrow-circle-up | <i class="fa fa-arrow-circle-up"></i> | DEMO | |
| arrow-circle-o-down | <i class="fa fa-arrow-circle-o-down"></i> | DEMO | |
| arrow-circle-o-left | <i class="fa fa-arrow-circle-o-left"></i> | DEMO | |
| arrow-circle-o-right | <i class="fa fa-arrow-circle-o-right"></i> | DEMO | |
| arrow-circle-o-up | <i class="fa fa-arrow-circle-o-up"></i> | DEMO | |
| arrow-down | <i class="fa fa-arrow-down"></i> | DEMO | |
| arrow-left | <i class="fa fa-arrow-left"></i> | DEMO | |
| arrow-right | <i class="fa fa-arrow-right"></i> | DEMO | |
| arrow-up | <i class="fa fa-arrow-up"></i> | DEMO | |
| arrows | <i class="fa fa-arrows"></i> | DEMO | |
| arrows-alt | <i class="fa fa-arrows-alt"></i> | DEMO | |
| arrows-h | <i class="fa fa-arrows-h"></i> | DEMO | |
| arrows-v | <i class="fa fa-arrows-v"></i> | DEMO | |
| caret-down | <i class="fa fa-caret-down"></i> | DEMO | |
| caret-left | <i class="fa fa-caret-left"></i> | DEMO | |
| caret-right | <i class="fa fa-caret-right"></i> | DEMO | |
| caret-up | <i class="fa fa-caret-up"></i> | DEMO | |
| caret-square-o-down | <i class="fa fa-caret-square-o-down"></i> | DEMO | |
| caret-square-o-left | <i class="fa fa-caret-square-o-left"></i> | DEMO | |
| caret-square-o-right | <i class="fa fa-caret-square-o-right"></i> | DEMO | |
| caret-square-o-up | <i class="fa fa-caret-square-o-up"></i> | DEMO | |
| chevron-circle-down | <i class="fa fa-chevron-circle-down"></i> | DEMO | |
| chevron-circle-left | <i class="fa fa-chevron-circle-left"></i> | DEMO | |
| chevron-circle-right | <i class="fa fa-chevron-circle-right"></i> | DEMO | |
| chevron-circle-up | <i class="fa fa-chevron-circle-up"></i> | DEMO | |
| chevron-down | <i class="fa fa-chevron-down"></i> | DEMO | |
| chevron-left | <i class="fa fa-chevron-left"></i> | DEMO | |
| chevron-right | <i class="fa fa-chevron-right"></i> | DEMO | |
| chevron-up | <i class="fa fa-chevron-up"></i> | DEMO | |
| exchange | <i class="fa fa-exchange"></i> | DEMO | |
| hand-o-down | <i class="fa fa-hand-o-down"></i> | DEMO | |
| hand-o-left | <i class="fa fa-hand-o-left"></i> | DEMO | |
| hand-o-right | <i class="fa fa-hand-o-right"></i> | DEMO | |
| hand-o-up | <i class="fa fa-hand-o-up"></i> | DEMO | |
| long-arrow-down | <i class="fa fa-long-arrow-down"></i> | DEMO | |
| long-arrow-left | <i class="fa fa-long-arrow-left"></i> | DEMO | |
| long-arrow-right | <i class="fa fa-long-arrow-right"></i> | DEMO | |
| long-arrow-up | <i class="fa fa-long-arrow-up"></i> | DEMO | |
| toggle-down | <i class="fa fa-toggle-down"></i> | DEMO | |
| toggle-left | <i class="fa fa-toggle-left"></i> | DEMO | |
| toggle-right | <i class="fa fa-toggle-right"></i> | DEMO | |
| toggle-up | <i class="fa fa-toggle-up"></i> | DEMO |