Quick Icon Tutorial

Breakdown of Icon


class=”fas fa-info-circle fa-xs” style=”color:red” aria-hidden=”true”

fas fa-info-circle: Icon set
fa-xs : Icon size
color: color of icon


Play on Sizes

<i class="fas fa-info-circle fa-xs"></i>
<i class="fas fa-info-circle fa-sm"></i>
<i class="fas fa-info-circle fa-lg"></i>
<i class="fas fa-info-circle fa-2x"></i>
<i class="fas fa-info-circle fa-3x"></i>
<i class="fas fa-info-circle fa-5x"></i>
<i class="fas fa-info-circle fa-7x"></i>
<i class="fas fa-info-circle fa-10x"></i>

Note: that any header bracket eg. h1,h2 may override the size of the icon that you trying to put in.

Play on Colors

<i class="fas fa-info-circle" style="color:red"></i>
<i class="fas fa-info-circle" style="color:orange"></i>
<i class="fas fa-info-circle" style="color:yellow"></i>
<i class="fas fa-info-circle" style="color:green"></i>
<i class="fas fa-info-circle" style="color:blue"></i>
<i class="fas fa-info-circle" style="color:indigo"></i>
<i class="fas fa-info-circle" style="color:violet"></i>
<i class="fas fa-info-circle" style="color:#555555"></i>

Suggested Code

<h2><a href=”#link”>SampleLink <i class=”fas fa-info-circle fa-lg” style=”color: green;” aria-hidden=”true”></i></a></h2>