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; }