Icons Basics
A basic settings that work with any set of icons. It is possible to change it's size, make icon size responsive, or change icon color.
<span class="icon fa-address-book"></span>
<span class="icon icon-x2 fa-address-book"></span>
<span class="icon icon-x3 fa-address-book"></span>
<span class="icon icon-x4 fa-address-book"></span>
<span class="icon icon-x5 fa-address-book"></span>
<span class="icon icon-x5 fa-address-book red-bg"></span>
<span class="icon icon-x5 fa-address-book purple-bg"></span>
<span class="icon icon-x5 fa-address-book orange-bg"></span>
<span class="icon icon-x5 fa-address-book blue-bg"></span>
<span class="icon icon-x5 fa-address-book grey-bg"></span>
<span class="icon icon-x5 fa-address-book red-gradient"></span>
<span class="icon icon-x5 fa-address-book purple-gradient"></span>
<span class="icon icon-x5 fa-address-book orange-gradient"></span>
<span class="icon icon-x5 fa-address-book blue-gradient"></span>
<span class="icon icon-x5 fa-address-book grey-gradient"></span>
Default
Small
Medium
Large
Extra Large
<div class="row">
<div class="col-12 col-md-4">
<h3>Default</h3>
<span class="icon fa-address-book"></span>
<span class="icon icon-x2 fa-address-book"></span>
<span class="icon icon-x3 fa-address-book"></span>
<span class="icon icon-x4 fa-address-book"></span>
<span class="icon icon-x5 fa-address-book"></span>
</div>
<div class="col-12 col-md-4">
<h3>Small</h3>
<span class="icon fa-address-book"></span>
<span class="icon icon-sm-x2 fa-address-book"></span>
<span class="icon icon-sm-x3 fa-address-book"></span>
<span class="icon icon-sm-x4 fa-address-book"></span>
<span class="icon icon-sm-x5 fa-address-book"></span>
</div>
<div class="col-12 col-md-4">
<h3>Medium</h3>
<span class="icon fa-address-book"></span>
<span class="icon icon-md-x2 fa-address-book"></span>
<span class="icon icon-md-x3 fa-address-book"></span>
<span class="icon icon-md-x4 fa-address-book"></span>
<span class="icon icon-md-x5 fa-address-book"></span>
</div>
<div class="col-12 col-md-4">
<h3>Large</h3>
<span class="icon fa-address-book"></span>
<span class="icon icon-lg-x2 fa-address-book"></span>
<span class="icon icon-lg-x3 fa-address-book"></span>
<span class="icon icon-lg-x4 fa-address-book"></span>
<span class="icon icon-lg-x5 fa-address-book"></span>
</div>
<div class="col-12 col-md-4">
<h3>Extra Large</h3>
<span class="icon fa-address-book"></span>
<span class="icon icon-xl-x2 fa-address-book"></span>
<span class="icon icon-xl-x3 fa-address-book"></span>
<span class="icon icon-xl-x4 fa-address-book"></span>
<span class="icon icon-xl-x5 fa-address-book"></span>
</div>
</div>
.more-vertical
.more-horizontal
.chevron-left
.chevron-right
.chevron-up
.chevron-down
.close
.plus
.search
.play
.pause
.stop
.record
.record-paused
.send
.camera
.switch-camera
.eye
.zoom-in
.zoom-out
.rotate-left
.rotate-right
.flip
.crop
.image-full
.image-small
<span class="icon icon-x2 more-vertical"></span>
<span class="icon icon-x2 more-horizontal"></span>
<span class="icon icon-x2 chevron-left"></span>
<span class="icon icon-x2 chevron-right"></span>
<span class="icon icon-x2 chevron-up"></span>
<span class="icon icon-x2 chevron-down"></span>
<span class="icon icon-x2 close"></span>
<span class="icon icon-x2 plus"></span>
<span class="icon icon-x2 search"></span>
<span class="icon icon-x2 play"></span>
<span class="icon icon-x2 pause"></span>
<span class="icon icon-x2 stop"></span>
<span class="icon icon-x2 record"></span>
<span class="icon icon-x2 record-paused"></span>
<span class="icon icon-x2 send"></span>
<span class="icon icon-x2 camera"></span>
<span class="icon icon-x2 switch-camera"></span>
<span class="icon icon-x2 eye"></span>