Flaticon icons can be used as through class names as shown below.
<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>
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="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>
Use .icon-{size} class format to set different sizes.
<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>
You can use Flaticons literally with any element within Keen.
<a href="#" class="btn btn-success font-weight-bold mr-2">
<i class="flaticon2-bell-4"></i> Button example
</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">
<i class="flaticon2-open-box"></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="flaticon2-graph-1"></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="flaticon2-analytics 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="flaticon2-pie-chart-2 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="flaticon2-box-1 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="flaticon2-file text-primary"></i></span>
<span class="navi-text">Orders</span>
</a>
</li>
</ul>
</div>
</div>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
