git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/_includes/new-naming.html

   1 <section id="new-naming">
   2   <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
   3   <p class="lead text-center alert alert-success">fa-[name]-[shape]-[o]-[direction]</p>
   4   <p>
   5     A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
   6     of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
   7     the names of variants.
   8   </p>
   9   <div class="row">
  10     <div class="col-lg-3 col-md-4 col-sm-6">
  11       <h4 class="margin-bottom-sm">fa-*</h4>
  12       <p class="margin-bottom-sm">Solid icons as the base variant</p>
  13       <ul class="fa-ul padding-left-sm">
  14         <li>
  15           <i class="fa fa-bookmark fa-li"></i>
  16           fa-bookmark
  17         </li>
  18         <li>
  19           <i class="fa fa-comment fa-li"></i>
  20           fa-comment
  21         </li>
  22         <li>
  23           <i class="fa fa-folder fa-li"></i>
  24           fa-folder
  25         </li>
  26       </ul>
  27     </div>
  28     <div class="col-lg-3 col-md-4 col-sm-6">
  29       <h4 class="margin-bottom-sm">*-o</h4>
  30       <p class="margin-bottom-sm">Outlined version of previous modifier</p>
  31       <ul class="fa-ul padding-left-sm">
  32         <li>
  33           <i class="fa fa-bookmark-o fa-li"></i>
  34           fa-bookmark-o
  35         </li>
  36         <li>
  37           <i class="fa fa-comment-o fa-li"></i>
  38           fa-comment-o
  39         </li>
  40         <li>
  41           <i class="fa fa-folder-o fa-li"></i>
  42           fa-folder-o
  43         </li>
  44       </ul>
  45     </div>
  46     <div class="col-lg-3 col-md-4 col-sm-6">
  47       <h4 class="margin-bottom-sm">*-circle</h4>
  48       <p class="margin-bottom-sm">Circle under previous modifier</p>
  49       <ul class="fa-ul padding-left-sm">
  50         <li>
  51           <i class="fa fa-check-circle fa-li"></i>
  52           fa-check-circle
  53         </li>
  54         <li>
  55           <i class="fa fa-exclamation-circle fa-li"></i>
  56           fa-exclamation-circle
  57         </li>
  58         <li>
  59           <i class="fa fa-plus-circle fa-li"></i>
  60           fa-plus-circle
  61         </li>
  62       </ul>
  63     </div>
  64     <div class="col-lg-3 col-md-4 col-sm-6">
  65       <h4 class="margin-bottom-sm">*-square</h4>
  66       <p class="margin-bottom-sm">Square under previous modifier</p>
  67       <ul class="fa-ul padding-left-sm">
  68         <li>
  69           <i class="fa fa-check-square fa-li"></i>
  70           fa-check-square
  71         </li>
  72         <li>
  73           <i class="fa fa-twitter-square fa-li"></i>
  74           fa-twitter-square
  75         </li>
  76         <li>
  77           <i class="fa fa-plus-square fa-li"></i>
  78           fa-plus-square
  79         </li>
  80       </ul>
  81     </div>
  82     <div class="col-lg-3 col-md-4 col-sm-6">
  83       <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
  84       <p class="margin-bottom-sm">Directional modifier always at the end</p>
  85       <ul class="fa-ul padding-left-sm">
  86         <li>
  87           <i class="fa fa-arrow-right fa-li"></i>
  88           fa-arrow-right
  89         </li>
  90         <li>
  91           <i class="fa fa-arrow-circle-right fa-li"></i>
  92           fa-arrow-circle-right
  93         </li>
  94         <li>
  95           <i class="fa fa-angle-double-right fa-li"></i>
  96           fa-angle-double-right
  97         </li>
  98       </ul>
  99     </div>
 100     <div class="col-lg-3 col-md-4 col-sm-6">
 101       <h4 class="margin-bottom-sm">*-alt</h4>
 102       <p class="margin-bottom-sm">Alternative to the original</p>
 103       <ul class="fa-ul padding-left-sm">
 104         <li>
 105           <i class="fa fa-unlock-alt fa-li"></i>
 106           fa-unlock-alt
 107         </li>
 108         <li>
 109           <i class="fa fa-list-alt fa-li"></i>
 110           fa-list-alt
 111         </li>
 112         <li>
 113           <i class="fa fa-github-alt fa-li"></i>
 114           fa-github-alt
 115         </li>
 116       </ul>
 117     </div>
 118     <div class="col-lg-3 col-md-4 col-sm-6">
 119       <h4 class="margin-bottom-sm">*-h, *-v</h4>
 120       <p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
 121       <ul class="fa-ul padding-left-sm">
 122         <li>
 123           <i class="fa fa-arrows-v fa-li"></i>
 124           fa-arrows-v
 125         </li>
 126         <li>
 127           <i class="fa fa-arrows-h fa-li"></i>
 128           fa-arrows-h
 129         </li>
 130         <li>
 131           <i class="fa fa-ellipsis-v fa-li"></i>
 132           fa-ellipsis-v
 133         </li>
 134       </ul>
 135     </div>
 136     <div class="col-lg-3 col-md-4 col-sm-6">
 137       <h4 class="margin-bottom-sm">Combine 'em up...</h4>
 138       <p class="margin-bottom-sm">Consistent when strung together</p>
 139       <ul class="fa-ul padding-left-sm">
 140         <li>
 141           <i class="fa fa-arrow-circle-o-right fa-li"></i>
 142           fa-arrow-circle-o-right
 143         </li>
 144         <li>
 145           <i class="fa fa-caret-square-o-right fa-li"></i>
 146           fa-caret-square-o-right
 147         </li>
 148         <li>
 149           <i class="fa fa-hand-o-right fa-li"></i>
 150           fa-hand-o-right
 151         </li>
 152       </ul>
 153     </div>
 154
 155   </div>
 156
 157 </section>