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>