HTML__fontAwesome_Icons.html

<!-- presenting the awesomeness that is font awesome -->
bower install fontawesome
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css">
<!-- make the structure-->
<i class="fa "></i>

<!-- alfred "fa <icon you want to get>" -->
<i class="fa fa-facebook-square"></i>

<!-- chang the size -->
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-facebook-square fa-5x"></i>

<!-- want a loading animation -->
<br>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

<!-- rotate -->
<br>
<i class="fa fa-facebook-square fa-rotate-90"></i>

<!-- stack icons -->
<br>
<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

<!-- change color -->
<br>
<br>
<br>
<style>
    .purple{
        color: purple;
    }
</style>
<i class="fa fa-facebook-square fa-3x purple"></i>

<!-- work with bootstrap -->
<br>
<br>
<br>
<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.2.0</a>