Skip to main content

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.

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 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.