Font Awesome Recipes

February 12, 2014

Quick Recipes for Making Composed Font awesome icons

Some recipes I put together to make composed font awesome icons.

Checkmark

<span class="fa-stack fa-lg">
  <i style="color:green" class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-check fa-stack-1x fa-inverse"></i>
</span>

Error

<span class="fa-stack fa-lg">
  <i style="color:#ff0202" class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>

Questionable

<span class="fa-stack fa-lg">
  <i style="color:gray" class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-question fa-stack-1x fa-inverse"></i>
</span>

Site Navigation buttons

<center>
<div  class="row"></div>
<a href="a3.html">
<span style="font-size:50px;" class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-chevron-left fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="/">
<span  style="font-size:50px;" class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="a5.html">
<span  style="font-size:50px;" class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-chevron-right fa-stack-1x fa-inverse"></i>
</span>
</a>
</center>