Font-Awesomeでアクセシビリティを確保しながらウェブフォントを活用する ref: http://qiita.com/beijaflor/items/88395c52804a06dbaccc

ショッピングカートの中身を見るボタン

<a href="path/to/shopping/cart">
  <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
  <span class="sr-only">View 3 items in your shopping cart</span>
</a>

ナビゲーションへのリンク

<a href="#navigation-main">
  <i class="fa fa-bars" title="Skip to main navigation" aria-hidden="true"></i>
  <span class="sr-only">Skip to main navigation</span>
</a>

リンクの前にアイコンを使用する場合

<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>

ロゴとして使用される場合

<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>

交通手段をアイコンで表現する場合

<dl>
  <dt>
    <i class="fa fa-car" aria-hidden="true"></i>
    <span class="sr-only">Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i class="fa fa-bicycle" aria-hidden="true"></i>
    <span class="sr-only">Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>

削除ボタンアイコン

<a class="btn btn-danger" href="path/to/settings">
  <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
  <span class="sr-only">Delete</span>
</a>

残り時間をアイコンで表現する場合

<i class="fa fa-hourglass" aria-hidden="true"></i>
<span class="sr-only">60 minutes remains in your exam</span>

<i class="fa fa-hourglass-half" aria-hidden="true"></i>
<span class="sr-only">30 minutes remains in your exam</span>

<i class="fa fa-hourglass-end" aria-hidden="true"></i>
<span class="sr-only">0 minutes remains in your exam</span>

装飾のためのアイコン

<i class="fa fa-fighter-jet" aria-hidden="true"></i>