Made with love

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Wide list of projects

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Notifications

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

On time payouts

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Award winning

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Special offers

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Flexible settings

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Extended support

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.

Icon Boxes 03

Description: Four columns responsive icon boxes with LivIcons on colored background boxes. Replace javascript: of href attribute with your links.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Icon box 03 -->
<div class="container">
    <div class="row icon-box-03">
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg1 right">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: heart.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper right">
                <h4 class="text-uppercase"><a href="javascript:">Made with love</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg2 left">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: briefcase.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper left">
                <h4 class="text-uppercase"><a href="javascript:">Wide list of projects</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
    </div>
    <div class="row icon-box-03">
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg3 right">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: bell.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper right">
                <h4 class="text-uppercase"><a href="javascript:">Notifications</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg4 left">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: credit-card-in.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper left">
                <h4 class="text-uppercase"><a href="javascript:">On time payouts</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
    </div>
    <div class="row icon-box-03">
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg5 right">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: trophy.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper right">
                <h4 class="text-uppercase"><a href="javascript:">Award winning</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg6 left">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: gift.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true"></div>
                </div>
            </div>
            <div class="text-wrapper left">
                <h4 class="text-uppercase"><a href="javascript:">Special offers</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
    </div>
    <div class="row icon-box-03">
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg7 right">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: gears.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper right">
                <h4 class="text-uppercase"><a href="javascript:">Flexible settings</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="icon-wrapper bg8 left">
                <div class="sub-wrapper">
                    <div class="livicon-evo" data-options="
                        name: help.svg;
                        style: lines;
                        strokeColor: #fff;
                        eventOn: grandparent;
                        drawOnViewport: true">
                    </div>
                </div>
            </div>
            <div class="text-wrapper left">
                <h4 class="text-uppercase"><a href="javascript:">Extended support</a></h4>
                <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasis design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for examples.</p>
            </div>
        </div>
    </div>
</div>
/************ Icon box 03 ************/
.icon-box-03 .sub-wrapper {
  -webkit-transition: all .2s linear;
  -ms-transition: all .2s linear;
  transition: all .2s linear;
}
.icon-box-03 .icon-wrapper {
  float: none;
  position: relative;
  width: 120px;
  height: 120px;
  margin: 40px auto 20px;
}
.icon-box-03 .sub-wrapper {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 108px;
  height: 108px;
  opacity: 0.62;
}
.icon-box-03 .livicon-evo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
}
.icon-box-03 .icon-wrapper:hover .sub-wrapper {
  opacity: 1;
}
.icon-box-03 .text-wrapper {
  text-align: center;
}
.icon-box-03 h4 {
  color: #2C3F50;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
}
.icon-box-03 p {
  color:#90A4AE;
}
.icon-box-03 .icon-wrapper.bg1 {
  background-color: #80CBC4;
}
.icon-box-03 .icon-wrapper.bg1 .sub-wrapper {
  background-color: #80CBC4;
  border: 1px solid #80CBC4;
}
.icon-box-03 .icon-wrapper.bg1:hover .sub-wrapper {
  background-color: #26A69A;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg2 {
  background-color: #CE93D8;
}
.icon-box-03 .icon-wrapper.bg2 .sub-wrapper {
  background-color: #CE93D8;
  border: 1px solid #CE93D8;
}
.icon-box-03 .icon-wrapper.bg2:hover .sub-wrapper {
  background-color: #AB47BC;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg3 {
  background-color: #81D4FA;
}
.icon-box-03 .icon-wrapper.bg3 .sub-wrapper {
  background-color: #81D4FA;
  border: 1px solid #81D4FA;
}
.icon-box-03 .icon-wrapper.bg3:hover .sub-wrapper {
  background-color: #29B6F6;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg4 {
  background-color: #FFCC80;
}
.icon-box-03 .icon-wrapper.bg4 .sub-wrapper {
  background-color: #FFCC80;
  border: 1px solid #FFCC80;
}
.icon-box-03 .icon-wrapper.bg4:hover .sub-wrapper {
  background-color: #FFA726;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg5 {
  background-color: #B0BEC5;
}
.icon-box-03 .icon-wrapper.bg5 .sub-wrapper {
  background-color: #B0BEC5;
  border: 1px solid #B0BEC5;
}
.icon-box-03 .icon-wrapper.bg5:hover .sub-wrapper {
  background-color: #78909C;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg6 {
  background-color: #FF8A65;
}
.icon-box-03 .icon-wrapper.bg6 .sub-wrapper {
  background-color: #FF8A65;
  border: 1px solid #FF8A65;
}
.icon-box-03 .icon-wrapper.bg6:hover .sub-wrapper {
  background-color: #FF5722;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg7 {
  background-color: #B39DDB;
}
.icon-box-03 .icon-wrapper.bg7 .sub-wrapper {
  background-color: #B39DDB;
  border: 1px solid #B39DDB;
}
.icon-box-03 .icon-wrapper.bg7:hover .sub-wrapper {
  background-color: #7E57C2;
  border-color: #fff;
}
.icon-box-03 .icon-wrapper.bg8 {
  background-color: #81C784;
}
.icon-box-03 .icon-wrapper.bg8 .sub-wrapper {
  background-color: #81C784;
  border: 1px solid #81C784;
}
.icon-box-03 .icon-wrapper.bg8:hover .sub-wrapper {
  background-color: #4CAF50;
  border-color: #fff;
}
@media (min-width: 768px) {
  .icon-box-03 {
    margin: 20px 0 20px;
  }
  .icon-box-03 .icon-wrapper.right {
    float: right;
    margin-top: 2px;
    margin-left: 20px;
  }
  .icon-box-03 .text-wrapper.right {
    text-align: right;
  }
  .icon-box-03 .icon-wrapper.left {
    float: left;
    margin-top: 2px;
    margin-right: 20px;
  }
  .icon-box-03 .text-wrapper.left {
    text-align: left;
  }
}

Categories

Icon Boxes

Share