How to set a different colour for each animated icon box

If you wanted a different colour for each animated icon box, you would need to add a wrap around each icon box, like so:

<div class="icon-box-colour-one">
[sf_iconbox image="ss-stopwatch" character="" type="animated" title="Quick &amp; Easy" animation="none" animation_delay="200"]Getting started is easy. Install our demo content and you'll be on your way in no time at all.
[/sf_iconbox]
</div>

Then you can add custom css to the box within theme options:

/* Front icon colour */
.icon-box-colour-one .sf-icon {
color: #222!important;
}
/* Front text colour */
.icon-box-colour-one .sf-icon-box-animated .front h3 {
color: #fff!important;
}
/* Flipside background colour */
.icon-box-colour-one .sf-icon-box-animated .back {
background: #222!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #fff!important;
}

Repeat for each one 🙂