Web Icons Tutorial
Font Awesome
Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
Font Awesome
- Font Awesome - Medical Icons
- Font Awesome - Brand Icons
- Font Awesome - Video Player Icons
- Font Awesome - Directional Icons
- Font Awesome - Text Editor Icons
- Font Awesome - Currency Icons
- Font Awesome - Chart Icons
- Font Awesome - Payment Icons
- Font Awesome - Form Control Icons
- Font Awesome - Spinner Icons
- Font Awesome - File Type Icons
- Font Awesome - Gender Icons
- Font Awesome - Transportation Icons
- Font Awesome - Hand Icons
- Font Awesome - Web Icons
- Font Awesome Icons
Material Icons
- Material - Toggle Icons
- Material - Social Icons
- Material - Notification Icons
- Material - Navigation Icons
- Material - Maps Icons
- Material - Image Icons
- Material - Hardware Icons
- Material - File Icons
- Material - Editor Icons
- Material - Device Icons
- Material - Content Icons
- Material - Communication Icons
- Material - AV Icons
- Material - Alert Icons
- Material - Action Icons
- Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Font Awesome - Directional Icons
Font Awesome - Directional Icons
This chapter explains the usage of Font Awesome Directional icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<html>
<head>
<pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome Directional icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −
| Usage | Result |
|---|---|
| <i class="fa fa-angle-double-down custom" ></i> | |
| <i class="fa fa-angle-double-left custom" ></i> | |
| <i class="fa fa-angle-double-right custom" ></i> | |
| <i class="fa fa-angle-double-up custom" ></i> | |
| <i class="fa fa-angle-down custom" ></i> | |
| <i class="fa fa-angle-left custom" ></i> | |
| <i class="fa fa-angle-right custom" ></i> | |
| <i class="fa fa-angle-up custom" ></i> | |
| <i class="fa fa-arrow-circle-down custom" ></i> | |
| <i class="fa fa-arrow-circle-left custom" ></i> | |
| <i class="fa fa-arrow-circle-right custom" ></i> | |
| <i class="fa fa-arrow-circle-up custom" ></i> | |
| <i class="fa fa-arrow-circle-o-down custom" ></i> | |
| <i class="fa fa-arrow-circle-o-left custom" ></i> | |
| <i class="fa fa-arrow-circle-o-right custom" ></i> | |
| <i class="fa fa-arrow-circle-o-up custom" ></i> | |
| <i class="fa fa-arrow-down custom" ></i> | |
| <i class="fa fa-arrow-left custom" ></i> | |
| <i class="fa fa-arrow-right custom" ></i> | |
| <i class="fa fa-arrow-up custom" ></i> | |
| <i class="fa fa-arrows custom" ></i> | |
| <i class="fa fa-arrows-alt custom" ></i> | |
| <i class="fa fa-arrows-h custom" ></i> | |
| <i class="fa fa-arrows-v custom" ></i> | |
| <i class="fa fa-caret-down custom" ></i> | |
| <i class="fa fa-caret-left custom" ></i> | |
| <i class="fa fa-caret-right custom" ></i> | |
| <i class="fa fa-caret-up custom" ></i> | |
| <i class="fa fa-caret-square-o-down custom" ></i> | |
| <i class="fa fa-caret-square-o-left custom" ></i> | |
| <i class="fa fa-caret-square-o-right custom" ></i> | |
| <i class="fa fa-caret-square-o-up custom" ></i> | |
| <i class="fa fa-chevron-circle-down custom" ></i> | |
| <i class="fa fa-chevron-circle-left custom" ></i> | |
| <i class="fa fa-chevron-circle-right custom" ></i> | |
| <i class="fa fa-chevron-circle-up custom" ></i> | |
| <i class="fa fa-chevron-down custom" ></i> | |
| <i class="fa fa-chevron-left custom" ></i> | |
| <i class="fa fa-chevron-right custom" ></i> | |
| <i class="fa fa-chevron-up custom" ></i> | |
| <i class="fa fa-hand-o-down custom" ></i> | |
| <i class="fa fa-hand-o-left custom" ></i> | |
| <i class="fa fa-hand-o-right custom" ></i> | |
| <i class="fa fa-hand-o-up custom" ></i> | |
| <i class="fa fa-long-arrow-down custom" ></i> | |
| <i class="fa fa-long-arrow-left custom" ></i> | |
| <i class="fa fa-long-arrow-right custom" ></i> | |
| <i class="fa fa-long-arrow-up custom" ></i> | |
| <i class="fa fa-toggle-down custom" ></i> | |
| <i class="fa fa-toggle-left custom" ></i> | |
| <i class="fa fa-toggle-right custom" ></i> | |
| <i class="fa fa-toggle-up custom" ></i> | |
| <i class="fa fa-exchange custom" ></i> |