পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Friday, March 17, 2017

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>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/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>
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)