نمادهای Flaticon را می توان از طریق نام کلاس طبق تصویر زیر استفاده کرد.
<i class="flaticon2-bell-4"></i>
<i class="flaticon2-gear"></i>
<i class="flaticon2-pen"></i>
<i class="flaticon2-open-box"></i>
<i class="flaticon2-hourglass-1"></i>
<i class="flaticon2-graph-1"></i>
.text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25}.
<i class="flaticon2-bell-4 text-success"></i>
<i class="flaticon2-gear text-primary"></i>
<i class="flaticon2-pen text-danger"></i>
<i class="flaticon2-open-box text-warning"></i>
<i class="flaticon2-hourglass-1 text-info"></i>
<i class="flaticon2-graph-1 text-dark"></i>
استفاده از کلاس.icon-{size} جهت تغییر اندازه فونت.
<i class="flaticon2-hourglass-1 icon-xs"></i>
<i class="flaticon2-hourglass-1 icon-sm"></i>
<i class="flaticon2-hourglass-1 icon-nm"></i>
<i class="flaticon2-hourglass-1 icon-md"></i>
<i class="flaticon2-hourglass-1 icon-lg"></i>
<i class="flaticon2-hourglass-1 icon-xl"></i>
<i class="flaticon2-hourglass-1 icon-2x"></i>
<i class="flaticon2-hourglass-1 icon-3x"></i>
<i class="flaticon2-hourglass-1 icon-4x"></i>
<i class="flaticon2-hourglass-1 icon-5x"></i>
<i class="flaticon2-hourglass-1 icon-6x"></i>
<i class="flaticon2-hourglass-1 icon-7x"></i>
<i class="flaticon2-hourglass-1 icon-8x"></i>
<i class="flaticon2-hourglass-1 icon-9x"></i>
<i class="flaticon2-hourglass-1 icon-10x"></i>
شما می توانید از Flaticons به معنای واقعی کلمه با هر عنصر مترونیک استفاده کنید.
<a href="#" class="btn btn-success font-weight-bold mr-2">
<i class="flaticon2-bell-4"></i> دکمه example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="flaticon2-open-box"></i> دکمه 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="flaticon2-graph-1"></i> دراپ دان 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="flaticon2-analytics text-danger"></i></span>
<span class="navi-text">پیامs</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="flaticon2-pie-chart-2 text-warning"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1 text-success"></i></span>
<span class="navi-text">وظایف</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="flaticon2-file text-primary"></i></span>
<span class="navi-text">سفارش</span>
</a>
</li>
</ul>
</div>
</div>
