Page : Icon effects

[vc_row][vc_column width=”1/1″][vc_column_text]

You can mix any size, color, animation and icon.

It’s about 40000000+ possible variations 🙂

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422844805893{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/3″][st_icon st_to_color=”#81d742″ st_size_icon=”box-icon-large” st_animation=”top-to-bottom” st_icon=”fa-bug” st_color_icon=”#1e73be” st_round=”round” st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left”][vc_column_text]

Icon: Bug
Size: Large
Color: Info
To Color: Success
Shape: Round
Animation: Top to bottom

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_to_color=”#1e73be” st_size_icon=”box-icon-big” st_animation=”border-fadeout” st_icon=”fa-cogs” st_color_icon=”#000000″ st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left”][vc_column_text]

Icon: Cogs
Size: Big
Color: Black
To color: Inverse
Animation: Border Fade out

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_to_color=”#dd3333″ st_size_icon=”box-icon-sm” st_animation=”shake” st_icon=”fa-heart” st_color_icon=”#dd3333″ st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left” st_round=”round” st_border=”box-icon-border”][vc_column_text]

Icon: Heart
Size: Normal
Color: Danger
Shape: Border, round
Animation: Shake

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422844805893{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/3″][st_icon st_to_color=”#dd3333″ st_size_icon=”box-icon-large” st_animation=”border-fadein” st_icon=”fa-fire” st_color_icon=”#dd9933″ st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left” st_border=”box-icon-border”][vc_column_text]

Icon: Fire
Size: Large
Color: Warning
To Color: Danger
Animation: Border Fadein

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_size_icon=”box-icon-big” st_animation=”left-to-right” st_icon=”fa-gift” st_color_icon=”#1e73be” st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left” st_round=”round”][vc_column_text]

Icon: Gift
Size: Big
Color: Inverse
To color: Normal
Shape: Round
Animation: Left to Right

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_size_icon=”box-icon-sm” st_animation=”bounce” st_icon=”fa-tag” st_color_icon=”#969696″ st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left”][vc_column_text]

Icon: Tag
Size: Normal
Color: Gray
To color: Normal
Animation: Bounce

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422844805893{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/3″][st_icon st_to_color=”#1e73be” st_size_icon=”box-icon-large” st_animation=”tada” st_icon=”fa-gear” st_color_icon=”#81d742″ st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left” st_border=”box-icon-border” st_round=”round”][vc_column_text]

Icon: Gear
Size: Large
Color: Success
To Color: Inverse
Shape: Round, dashed
Animation: Tada

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_to_color=”#dd3333″ st_size_icon=”box-icon-big” st_animation=”flash” st_icon=”fa-glass” st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left”][vc_column_text]

Icon: Glass
Size: Big
Color: Normal
To color: Danger
Animation: Flash

[/vc_column_text][/vc_column][vc_column width=”1/3″][st_icon st_size_icon=”box-icon-sm” st_animation=”border-rise” st_icon=”fa-globe” st_color_icon=”#1e73be” st_tooltip=”Tooltip” st_pos_tooltip=”none” st_aligment=”box-icon-left” st_round=”round” st_to_color=”#1e73be”][vc_column_text]

Icon: Globe
Size: Normal
Color: Info
Shape: Round
Animation: Border Rise

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422846891898{margin-top: 60px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/1″][vc_column_text]

Sizes

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422847140527{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-center” st_size_icon=”box-icon-huge” st_icon=”fa-bolt”][vc_column_text]

Huge

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-large” st_icon=”fa-bolt”][vc_column_text]

Large

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]

Big

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-md” st_icon=”fa-bolt”][vc_column_text]

Normal

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-sm” st_icon=”fa-bolt”][vc_column_text]

Small

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row css=”.vc_custom_1422846891898{margin-top: 60px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/1″][vc_column_text]

Colors

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422848119328{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]

Normal

Black

Gray

Inverse

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row css=”.vc_custom_1422848119328{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#2f96b4″][vc_column_text]

Info

Success

Warning

Danger

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text]You can set any transition between colors[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422848119328{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#000000″][vc_column_text]

Black to Normal

Warning Danger

Normal Inverse

Gray Success

Info Black

Inverse Gray

Shape

Round

Border

Border Round

Border Dashed

Dashed Round

Animations

Flash

Shake

Bounce

Tada

Swing

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”pulse”][vc_column_text]Pulse[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422848119328{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”border-rise”][vc_column_text]

Border Rise

Border Rise Alt

Border Fade out

Border Fade in

[/vc_column_text][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row css=”.vc_custom_1422848119328{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”left-to-right”][vc_column_text]

Left to Right

Right to Left

Top to Bottom

Bottom to Top

Aligment

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422851976403{margin-top: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/4″][vc_column_text]Normal[/vc_column_text][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]Dictumst viverra libero justo tempus urna eleifend morbi[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Center[/vc_column_text][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-center” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]Dictumst viverra libero justo tempus urna eleifend morbi[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Left[/vc_column_text][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-left” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]Dictumst viverra libero justo tempus urna eleifend morbi[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]Right[/vc_column_text][st_icon st_pos_tooltip=”none” st_aligment=”box-icon-right” st_size_icon=”box-icon-big” st_icon=”fa-bolt”][vc_column_text]Dictumst viverra libero justo tempus urna eleifend morbi[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422846891898{margin-top: 60px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/1″][vc_column_text]

Tooltips

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422852367885{margin-top: 30px !important;margin-bottom: 30px !important;}” row_fullwidth=”no” parallax_class=”no” bg_video=”no”][vc_column width=”1/6″][st_icon st_pos_tooltip=”top” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”left-to-right” st_tooltip=”Tooltip top”][vc_column_text]

Top

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”bottom” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”right-to-left” st_tooltip=”Tooltip Bottom”][vc_column_text]

Bottom

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”left” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_tooltip=”Tooltip left”][vc_column_text]

Left

[/vc_column_text][/vc_column][vc_column width=”1/6″][st_icon st_pos_tooltip=”right” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_tooltip=”Tooltip right”][vc_column_text]

Right

[/vc_column_text][/vc_column][/vc_row]