Font Awesome

Skill Level: Intermediate

Font Awesome is a styling tool that minimizes time spent on creating image icons. You can simply call in a font item and style it with css.  

How to apply:

1. View the source of a paragraph area
2. Look up the font item on fontawesome.com in the search bar
3. Paste the html calling the font item
4. Style the item with CSS

Samples:

<i class="fa fa-external-link" style="padding: 5px;"></i> <i class="fa fa-phone" style="padding: 5px;"></i> <i class="fa fa-envelope" style="padding: 5px;"></i> <i class="fa fa-external-link" style="padding: 5px;"></i> <i class="fa fa-download" style="padding: 5px;"></i> <i class="fa fa-check" style="padding: 5px;"></i> <i class="fa fa-users" style="padding: 5px;"></i> <i class="fa fa-male" style="padding: 5px;"></i> <i class="fa fa-female" style="padding: 5px;"></i> <i class="fa fa-address-card" style="padding: 5px;"></i> <i class="fa fa-comments" style="padding: 5px;"></i> <i class="fa fa-mouse-pointer" style="padding: 5px;"></i> <i class="fa fa-server" style="padding: 5px;"></i> <i class="fa fa-money" style="padding: 5px;"></i> <i class="fa fa-clock-o" style="padding: 5px;"></i> <i class="fa fa-pie-chart" style="padding: 5px;"></i> <i class="fa fa-line-chart" style="padding: 5px;"></i> <i class="fa fa-life-ring" style="padding: 5px;"></i> <i class="fa fa-quote-left" style="padding: 5px;"></i> <i class="fa fa-quote-right" style="padding: 5px;"></i> <i class="fa fa-file" style="padding: 5px;"></i> <i class="fa fa-files" style="padding: 5px;"></i> <i class="fa fa-file-o" style="padding: 5px;"></i> <i class="fa fa-file-pdf-o" style="padding: 5px;"></i> <i class="fa fa-file-powerpoint-o" style="padding: 5px;"></i>

Styles

li a i.fa {
  padding-right: 10px;
}