Fork-Awesome/src/_includes/new-naming.html

<section id="new-naming">
  <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
  <p class="lead text-center alert alert-success">fa-[name]-[shape]-[alt]-[direction]</p>
  <p>
    A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
    of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
    the names of variants.
  </p>
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">fa-*</h4>
      <p class="margin-bottom-sm">Solid icons as the base variant</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-bookmark fa-li"></i>
          fa-bookmark
        </li>
        <li>
          <i class="fa fa-comment fa-li"></i>
          fa-comment
        </li>
        <li>
          <i class="fa fa-folder fa-li"></i>
          fa-folder
        </li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">*-alt</h4>
      <p class="margin-bottom-sm">Outlined version of previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-bookmark-alt fa-li"></i>
          fa-bookmark-alt
        </li>
        <li>
          <i class="fa fa-comment-alt fa-li"></i>
          fa-comment-alt
        </li>
        <li>
          <i class="fa fa-folder-alt fa-li"></i>
          fa-folder-alt
        </li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">*-circle</h4>
      <p class="margin-bottom-sm">Circle under previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-check-circle fa-li"></i>
          fa-check-circle
        </li>
        <li>
          <i class="fa fa-exclamation-circle fa-li"></i>
          fa-exclamation-circle
        </li>
        <li>
          <i class="fa fa-plus-circle fa-li"></i>
          fa-plus-circle
        </li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">*-square</h4>
      <p class="margin-bottom-sm">Square under previous modifier</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-check-square fa-li"></i>
          fa-check-square
        </li>
        <li>
          <i class="fa fa-twitter-square fa-li"></i>
          fa-twitter-square
        </li>
        <li>
          <i class="fa fa-plus-square fa-li"></i>
          fa-plus-square
        </li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
      <p class="margin-bottom-sm">Directional modifier always at the end</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-arrow-right fa-li"></i>
          fa-arrow-right
        </li>
        <li>
          <i class="fa fa-arrow-circle-right fa-li"></i>
          fa-arrow-circle-right
        </li>
        <li>
          <i class="fa fa-angle-double-right fa-li"></i>
          fa-angle-double-right
        </li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-6">
      <h4 class="margin-bottom-sm">Combine 'em up...</h4>
      <p class="margin-bottom-sm">Consistent when strung together</p>
      <ul class="fa-ul padding-left-sm">
        <li>
          <i class="fa fa-arrow-circle-alt-right fa-li"></i>
          fa-arrow-circle-alt-right
        </li>
        <li>
          <i class="fa fa-caret-square-alt-right fa-li"></i>
          fa-caret-square-alt-right
        </li>
        <li>
          <i class="fa fa-hand-alt-right fa-li"></i>
          fa-hand-alt-right
        </li>
      </ul>
    </div>

  </div>

</section>