Fontawesome icons can be used as class="fa {class}".
<i class="fa fa-comment-alt"></i>
<i class="fa fa-envelope-open-text"></i>
<i class="fa fa-map-marker-alt"></i>
<i class="fa fa-search"></i>
<i class="fa fa-quote-right"></i>
<i class="fa fa-fill-drip"></i>
Use .text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25} class format to set different colors.
<i class="fa fa-comment-alt text-success mr-5"></i>
<i class="fa fa-envelope-open-text text-primary mr-5"></i>
<i class="fa fa-map-marker-alt text-danger mr-5"></i>
<i class="fa fa-search text-warning mr-5"></i>
<i class="fa fa-quote-right text-info mr-5"></i>
<i class="fa fa-fill-drip text-dark"></i>
Use .icon-{size} class format to set different sizes.
<i class="fa fa-fill-drip icon-xs"></i>
<i class="fa fa-fill-drip icon-sm"></i>
<i class="fa fa-fill-drip icon-nm"></i>
<i class="fa fa-fill-drip icon-md"></i>
<i class="fa fa-fill-drip icon-lg"></i>
<i class="fa fa-fill-drip icon-xl"></i>
<i class="fa fa-fill-drip icon-2x"></i>
<i class="fa fa-fill-drip icon-3x"></i>
<i class="fa fa-fill-drip icon-4x"></i>
<i class="fa fa-fill-drip icon-5x"></i>
<i class="fa fa-fill-drip icon-6x"></i>
<i class="fa fa-fill-drip icon-7x"></i>
<i class="fa fa-fill-drip icon-8x"></i>
<i class="fa fa-fill-drip icon-9x"></i>
<i class="fa fa-fill-drip icon-10x"></i>
You can use Flaticons literally with any element within Metronic.
<a href="#" class="btn btn-success font-weight-bold mr-2">
<i class="fa fa-comment-alt"></i> Button example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="fa fa-envelope-open-text"></i> Button example 2
</a>
<div class="dropdown dropdown-inline">
<a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-search"></i> Dropdown example
</a>
<div class="dropdown-menu dropdown-menu-md py-5">
<ul class="navi navi-hover">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-comment-alt text-danger"></i></span>
<span class="navi-text">Messages</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-cog text-warning"></i></span>
<span class="navi-text">Settings</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-poll text-success"></i></span>
<span class="navi-text">Tasks</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="fa fa-fill-drip text-primary"></i></span>
<span class="navi-text">Orders</span>
</a>
</li>
</ul>
</div>
</div>
