Page : Icon effects

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

It’s about 40000000+ possible variations 🙂

[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”]

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

[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”]

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

[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”]

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

[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”]

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

[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”]

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

[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”]

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

[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”]

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

[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”]

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

[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”]

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

Sizes

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-center” st_size_icon=”box-icon-huge” st_icon=”fa-bolt”]

Huge

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-large” st_icon=”fa-bolt”]

Large

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Big

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-md” st_icon=”fa-bolt”]

Normal

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-sm” st_icon=”fa-bolt”]

Small

Colors

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Normal

[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″]

Black

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#848484″]

Gray

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#127cdc”]

Inverse

[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″]

Info

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#51a351″]

Success

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#f89406″]

Warning

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#bd362f”]

Danger

You can set any transition between colors

[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″]

Black to Normal

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#eeee22″ st_to_color=”#dd3333″]

Warning Danger

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_to_color=”#1e73be”]

Normal Inverse

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#a5a5a5″ st_to_color=”#81d742″]

Gray Success

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#4184bf” st_to_color=”#000000″]

Info Black

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#1e73be” st_to_color=”#8e8e8e”]

Inverse Gray

Shape

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_round=”round”]

Round

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_border=”box-icon-border”]

Border

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_round=”round” st_border=”box-icon-border”]

Border Round

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_border=”box-icon-border-dashed”]

Border Dashed

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_round=”round” st_border=”box-icon-border-dashed”]

Dashed Round

Animations

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”flash”]

Flash

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”shake”]

Shake

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”bounce”]

Bounce

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”tada”]

Tada

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”swing”]

Swing

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”pulse”]

Pulse

[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”]

Border Rise

[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-alt”]

Border Rise Alt

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”border-fadeout”]

Border Fade out

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”border-fadein”]

Border Fade in

[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”]

Left to Right

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”right-to-left”]

Right to Left

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”top-to-bottom”]

Top to Bottom

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_animation=”bottom-to-top”]

Bottom to Top

Aligment

Normal

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Dictumst viverra libero justo tempus urna eleifend morbi

Center

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-center” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Dictumst viverra libero justo tempus urna eleifend morbi

Left

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-left” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Dictumst viverra libero justo tempus urna eleifend morbi

Right

[st_icon st_pos_tooltip=”none” st_aligment=”box-icon-right” st_size_icon=”box-icon-big” st_icon=”fa-bolt”]

Dictumst viverra libero justo tempus urna eleifend morbi

Tooltips

[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”]

Top

[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”]

Bottom

[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”]

Left

[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”]

Right

Page : Icon effects