[ประกอบหนังสือ Bootstrap]

fontawesome_example.html

<a class="btn btn-danger" href="#">
    <i class="fa fa-trash-o fa-lg"></i> Delete
</a>
<a class="btn btn-default btn-sm" href="#">
    <i class="fa fa-cog"></i> Settings
</a>
<a class="btn btn-lg btn-success" href="#">
    <i class="fa fa-flag fa-2x pull-left"></i> 
    Font Awesome<br>Version 4.0.3
</a>
<div class="btn-group">
    <a class="btn btn-default" href="#">
      <i class="fa fa-align-left"></i>
    </a>
    <a class="btn btn-default" href="#">
      <i class="fa fa-align-center"></i>
    </a>
    <a class="btn btn-default" href="#">
      <i class="fa fa-align-right"></i>
    </a>
    <a class="btn btn-default" href="#">
      <i class="fa fa-align-justify"></i>
    </a>
</div>
<div class="input-group margin-bottom-sm">
    <span class="input-group-addon">
      <i class="fa fa-envelope-o fa-fw"></i>
    </span>
    <input class="form-control" type="text" 
     placeholder="Email address">
</div>
<div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-key fa-fw"></i>
    </span>
    <input class="form-control" type="password" 
      placeholder="Password">
</div>
<div class="btn-group open">
    <a class="btn btn-primary" href="#">
      <i class="fa fa-userfa-fw"></i> User
    </a>
    <a class="btn btn-primary dropdown-toggle" 
    data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down"></span>
    </a>
    <ul class="dropdown-menu">
        <li>
          <a href="#">
            <i class="fa fa-pencil fa-fw"></i> Edit
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-trash-o fa-fw"></i> 
            Delete
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-ban fa-fw"></i> Ban
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#"><i class="i"></i> 
            Make admin
          </a>
        </li>
    </ul> 
</div>