Page : Icon effects

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

It’s about 40000000+ possible variations 🙂

[st_icon st_pos_tooltip=”none” st_to_color=”#81d742″ st_aligment=”box-icon-left” st_size_icon=”box-icon-large” st_round=”round” st_animation=”top-to-bottom” st_icon=”fa-bug” st_color_icon=”#1e73be” st_tooltip=”Tooltip”]

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

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

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

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

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

[st_icon st_pos_tooltip=”none” st_to_color=”#dd3333″ st_aligment=”box-icon-left” st_size_icon=”box-icon-large” st_border=”box-icon-border” st_animation=”border-fadein” st_icon=”fa-fire” st_color_icon=”#dd9933″ st_tooltip=”Tooltip”]

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

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

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

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

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

[st_icon st_pos_tooltip=”none” st_to_color=”#1e73be” st_aligment=”box-icon-left” st_size_icon=”box-icon-large” st_round=”round” st_border=”box-icon-border” st_animation=”tada” st_icon=”fa-gear” st_color_icon=”#81d742″ st_tooltip=”Tooltip”]

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

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

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

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

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_to_color=”#dd3333″ st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_icon=”fa-bolt” st_color_icon=”#eeee22″]

Warning Danger

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

Normal Inverse

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

Gray Success

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

Info Black

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

Inverse Gray

Shape

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

Round

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

Border

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

Border Round

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

Border Dashed

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

Dashed Round

Animations

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

Flash

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

Shake

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

Bounce

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

Tada

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

Swing

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

Pulse

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

Border Rise

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

Border Rise Alt

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

Border Fade out

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

Border Fade in

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

Left to Right

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

Right to Left

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

Top to Bottom

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

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_animation=”left-to-right” st_icon=”fa-bolt” st_tooltip=”Tooltip top”]

Top

[st_icon st_pos_tooltip=”bottom” st_aligment=”box-icon-none” st_size_icon=”box-icon-big” st_animation=”right-to-left” st_icon=”fa-bolt” 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

Login

Do not have an account?

Sign Up

Already a member?

Login

Do not have an account?

Sign Up

Already a member?

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

It’s about 40000000+ possible variations 🙂

Sizes

Colors

Shape

Animations

Aligment

Tooltips

Leave a Reply Cancel Reply