Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

  1. Shortcodes
  2. Icon Boxes
Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

<div class="icon-box icon-top">
    <div class="icon-box-contain">
        <i class="fa fa-bullhorn"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-default btn-bordered btn-sm" href="#">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain selected">
        <i class="fa fa-rocket fa-primary"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-primary btn-sm" href="#">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain selected">
        <i class="fa fa-magic"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-default btn-bordered btn-sm" href="#">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain">
        <i class="fa fa-trophy fa-primary"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-primary btn-sm" href="#">Learn more +</a></p>
    </div>
</div>
Default icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri. 

<div class="icon-box box-default">
    <div class="icon-box-contain">
        <i class="fa fa-laptop fa-3x"></i>
        <h5>Default icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-laptop icon-bg"></i>
</div>
Primary icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri. 

<div class="icon-box box-primary">
    <div class="icon-box-contain">
        <i class="fa fa-flask fa-3x"></i>
        <h5>Primary icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-flask icon-bg"></i>
</div>
box image background 01
Image icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri. 

<div class="icon-box box-image">
    <div class="box-background">
        <img src="img/service_1.jpg" alt="box image background 01" />
    </div>
    <div class="icon-box-contain">
        <i class="fa fa-tablet fa-3x"></i>
        <h5>Image icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-tablet icon-bg"></i>
</div>
Column grey

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque.

Column default

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque.

Column primary

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque. 

<div class="icon-column-wrapp">
    <div class="icon-column box-grey">
        <div class="icon-column-contain">
            <i class="fa fa-coffee fa-2x"></i>
            <h5>Column grey</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-coffee icon-bg"></i>
    </div>
    <div class="icon-column box-default">
        <div class="icon-column-contain">
            <i class="fa fa-camera fa-2x"></i>
            <h5>Column default</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-camera icon-bg"></i>
    </div>
    <div class="icon-column box-primary">
        <div class="icon-column-contain">
            <i class="fa fa-comments fa-2x"></i>
            <h5>Column primary</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-comments icon-bg"></i>
    </div>
</div>
Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam. 

<div class="col-icon pull-left">
    <i class="fa fa-wrench icon-circle fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
    [...]
    </p>
</div>
Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam. 

<div class="col-icon pull-left">
    <i class="fa fa-wrench fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-left">
    <i class="fa fa-upload fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-left">
    <i class="fa fa-thumbs-up fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>
Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram. 

<div class="col-icon pull-right">
    <i class="fa fa-laptop fa-3x fa-brown"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-right">
    <i class="fa fa-coffee fa-3x fa-yellow"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-right">
    <i class="fa fa-download fa-3x fa-red"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram. 

<div class="col-icon centered">
    <i class="fa fa-gift fa-3x fa-yellow rounded-2x icon-square"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-flask fa-2x fa-light-green rounded-4x icon-square"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-trophy fa-2x icon-circle"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram. 

<div class="col-icon centered">
    <i class="fa fa-gift fa-3x icon-circle icon-bordered"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-flask fa-3x fa-dark-blue icon-circle icon-bordered"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-trophy fa-3x fa-red icon-square icon-bordered"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
Box with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Box with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Box with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="icon-wrapp">
    <div class="icon-boxline">
        <i class="fa fa-headphones fa-3x fa-primary"></i>
        <h5>24/7 support</h5>
        <p>
            [...]
        </p>
    </div>
    <div class="icon-boxline">
        <i class="fa fa-truck fa-3x fa-primary"></i>
        <h5>Free shipping</h5>
        <p>
            [...]
        </p>
    </div>
    <div class="icon-boxline">
        <i class="fa fa-shopping-cart fa-3x fa-primary"></i>
        <h5>Save shopping</h5>
        <p>
            [...]
        </p>
    </div>
</div>
Absolute left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Absolute left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Absolute left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-icon box absolute-left">
    <i class="fa fa-cogs fa-dark-red icon-circle icon-bordered"></i>
    <h5>Absolute left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon box absolute-left">
    <i class="fa fa-magic fa-green icon-circle icon-bordered"></i>
    <h5>Absolute left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon box absolute-left">
    <i class="fa fa-laptop fa-purple icon-circle icon-bordered"></i>
    <h5>Absolute left icon</h5>
    <p>
        [...]
    </p>
</div>
Absolute right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Absolute right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Absolute right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-icon box absolute-right">
    <i class="fa fa-magic fa-2x fa-yellow"></i>
    <h5>Absolute right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon box absolute-right">
    <i class="fa fa-laptop fa-2x fa-orange"></i>
    <h5>Absolute right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon box absolute-right">
    <i class="fa fa-cogs fa-2x fa-teal"></i>
    <h5>Absolute right icon</h5>
    <p>
        [...]
    </p>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-icon-2 box">
    <i class="fa fa-magic"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon-2 box">
    <i class="fa fa-laptop"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon-2 box">
    <i class="fa fa-cogs"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-gift fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-flask fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
<div class="col-icon centered">
        <i class="fa fa-trophy fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-gift fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-flask fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-trophy fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-gift fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-flask fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-trophy fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei ex. 

<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-gift fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-flask fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>
<div class="col-md-4 cta-box">
    <div class="col-icon centered">
        <i class="fa fa-trophy fa-3x icon-circle"></i>
        <h5>Text with center icon</h5>
        <p>
            [...]
        </p>
    </div>
</div>