Icon Boxes 01

Description: Five columns responsive icon boxes with white (lines style) LivIcons inside them. Replace javascript: inside 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 01 -->
<div class="container">
    <div class="row">
        <a href="javascript:">
            <div class="icon-box-01 bg1 col-sm-5ths col-xs-6">
                <div class="icon-wrapper">
                    <div class="livicon-evo" data-options="
                        name: globe.svg; 
                        style: lines; 
                        strokeColor: #ffffff; 
                        strokeColorAction: #a70c00; 
                        colorsOnHover: custom; 
                        eventOn: grandparent; 
                        drawOnViewport: true 
                    "></div>
                    <h5 class="text-center text-uppercase white">Multilingual</h5>
                </div>
            </div>
        </a>
        <a href="javascript:">
            <div class="icon-box-01 bg2 col-sm-5ths col-xs-6">
                <div class="icon-wrapper">
                    <div class="livicon-evo" data-options="
                        name: brush.svg; 
                        style: lines; 
                        strokeColor: #ffffff; 
                        strokeColorAction: #a70c00; 
                        colorsOnHover: custom; 
                        eventOn: grandparent; 
                        drawOnViewport: true 
                    "></div>
                    <h5 class="text-center text-uppercase white">Cool Design</h5>
                </div>
            </div>
        </a>
        <a href="javascript:">
            <div class="icon-box-01 bg3 col-sm-5ths col-xs-6">
                <div class="icon-wrapper">
                    <div class="livicon-evo" data-options="
                        name: heart.svg; 
                        style: lines; 
                        strokeColor: #ffffff; 
                        strokeColorAction: #a70c00; 
                        colorsOnHover: custom; 
                        eventOn: grandparent; 
                        drawOnViewport: true 
                    "></div>
                    <h5 class="text-center text-uppercase white">Made with love</h5>
                </div>
            </div>
        </a>
        <a href="javascript:">
            <div class="icon-box-01 bg2 col-sm-5ths col-xs-6">
                <div class="icon-wrapper">
                    <div class="livicon-evo" data-options="
                        name: bar-chart.svg; 
                        style: lines; 
                        strokeColor: #ffffff; 
                        strokeColorAction: #a70c00; 
                        colorsOnHover: custom; 
                        eventOn: grandparent; 
                        drawOnViewport: true 
                    "></div>
                    <h5 class="text-center text-uppercase white">Analytics</h5>
                </div>
            </div>
        </a>
        <a href="javascript:">
            <div class="icon-box-01 bg1 col-sm-5ths col-xs-12">
                <div class="icon-wrapper">
                    <div class="livicon-evo" data-options="
                        name: coins.svg; 
                        style: lines; 
                        strokeColor: #ffffff; 
                        strokeColorAction: #a70c00; 
                        colorsOnHover: custom; 
                        eventOn: grandparent; 
                        drawOnViewport: true 
                    "></div>
                    <h5 class="text-center text-uppercase white">Flex prices</h5>
                </div>
            </div>
        </a>
    </div>
</div>
/********* Five columns grid **********/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5ths {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}
/************ Icon box 01 ************/
.icon-box-01 {
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.icon-box-01 {
  -webkit-transition: background-color .2s linear;
  -ms-transition: background-color .2s linear;
  transition: background-color .2s linear;
}
.icon-box-01 {
  min-height: 240px;
}
.icon-box-01.bg1 {
  background-color: #B3421B;
}
.icon-box-01.bg2 {
  background-color: #A3320B;
}
.icon-box-01.bg3 {
  background-color: #932210;
}
.icon-box-01:hover {
  background-color: #F3825B!important;
}
.icon-box-01 .livicon-evo {
  margin: 0 auto 20px;
}
.icon-box-01 .icon-wrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon-box-01 h5 {
  font-weight: 400;
}
.icon-box-01 .white {
  color: #fff;
}
.icon-box-01 a:hover, a:focus {
  text-decoration: none;
}

Categories

Icon Boxes

Share