Sociconicons can be used as through class names as shown below.
<i class="socicon-vimeo mr-5"></i>
<i class="socicon-telegram mr-5"></i>
<i class="socicon-facebook mr-5"></i>
<i class="socicon-android mr-5"></i>
<i class="socicon-amazon mr-5"></i>
<i class="socicon-google"></i>
Use
.icon-{color}class format to set different colors.
<i class="socicon-vimeo text-success mr-5"></i>
<i class="socicon-telegram text-primary mr-5"></i>
<i class="socicon-facebook text-danger mr-5"></i>
<i class="socicon-android text-warning mr-5"></i>
<i class="socicon-amazon text-info mr-5"></i>
<i class="socicon-google text-dark"></i>
Use
.icon-{size}class format to set different sizes.
<i class="socicon-android icon-xs"></i>
<i class="socicon-android icon-sm"></i>
<i class="socicon-android icon-md"></i>
<i class="socicon-android icon-lg"></i>
<i class="socicon-android icon-xl"></i>
<i class="socicon-android icon-2x"></i>
<i class="socicon-android icon-3x"></i>
<i class="socicon-android icon-4x"></i>
<i class="socicon-android icon-5x"></i>
<i class="socicon-android icon-6x"></i>
<i class="socicon-android icon-7x"></i>
<i class="socicon-android icon-8x"></i>
<i class="socicon-android icon-9x"></i>
<i class="socicon-android 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="socicon-foursquare"></i> Button example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="socicon-skype"></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="socicon-airbnb"></i> Dropdown example
</a>
<div class="dropdown-menu dropdown-menu-md py-5" style="">
<ul class="navi navi-hover">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="socicon-chrome 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="socicon-dribbble 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="socicon-apple 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="socicon-envato text-primary"></i></span>
<span class="navi-text">Orders</span>
</a>
</li>
</ul>
</div>
</div>
