CSS3 ADD-ONS

Load page effects

25sec.
SCALE: fa-scale
<i class="fa fa-desktop fa-scale fa-5x fa-fw"></i><i class="fa fa-laptop fa-scale fa-5x fa-fw"></i><i class="fa fa-tablet fa-scale fa-5x fa-fw"></i><i class="fa fa-mobile fa-scale fa-5x fa-fw"></i>
FADE: fa-fade-50 …100,150,200,250 mls
<i class="fa fa-desktop fa-fade-100 fa-5x fa-fw"></i><i class="fa fa-laptop fa-fade-150 fa-5x fa-fw"></i><i class="fa fa-tablet fa-fade-200 fa-5x fa-fw"></i><i class="fa fa-mobile fa-fade-250 fa-5x fa-fw"></i>
DANGLES: fa-dangles
<i class="fa fa-desktop fa-dangles fa-5x fa-fw"> </i> <i class="fa fa-laptop fa-dangles fa-5x fa-fw"> </i> <i class="fa fa-tablet fa-dangles fa-5x fa-fw"></i> <i class="fa fa-mobile fa-dangles fa-5x fa-fw"></i>
FLIP: fa-dangles Vertical + Flip Horizontal
50/100/150/200 millisecond
           
<i class="fa fa-desktop fa-5x fa-flip-horizontal-50"></i> &nbsp; &nbsp; <i class="fa fa-laptop fa-5x fa-flip-horizontal-100"></i> &nbsp; &nbsp; <i class="fa fa-tablet fa-5x fa-flip-vertical-50"></i> &nbsp; &nbsp; <i class="fa fa-mobile fa-5x fa-flip-vertical-100"></i>
SCALE: fa-scale-inverse
<i class="fa fa-desktop fa-scale-inverse fa-5x fa-fw"></i><i class="fa fa-laptop fa-scale-inverse fa-5x fa-fw"></i><i class="fa fa-tablet fa-scale-inverse fa-5x fa-fw"></i><i class="fa fa-mobile fa-scale-inverse fa-5x fa-fw"></i>
Rock: fa-rock
<i class="fa fa-desktop fa-rock fa-5x fa-fw"></i><i class="fa fa-laptop fa-rock fa-5x fa-fw"></i><i class="fa fa-tablet fa-rock fa-5x fa-fw"></i><i class="fa fa-mobile fa-rock fa-5x fa-fw"></i>
Pulse: fa-pulse & fa-pulse-loop (max10second)
LOOP
<i class="fa fa-desktop fa-pulse fa-5x fa-fw"> </i> <i class="fa fa-laptop fa-pulse fa-5x fa-fw"> </i> <i class="fa fa-tablet fa-pulse fa-5x fa-fw"></i> <i class="fa fa-mobile fa-pulse-loop fa-5x fa-fw"></i>
SPIN EXTRAS: fa-spin-20
…30,40,45,50,60,70,80,90,180,360°
<i class="fa fa-desktop fa-spin-45 fa-5x fa-fw"> </i> <i class="fa fa-laptop fa-spin-90 fa-5x fa-fw"> </i> <i class="fa fa-tablet fa-spin-180 fa-5x fa-fw"></i> <i class="fa fa-mobile fa-spin-360 fa-5x fa-fw"></i>
SLIDE: fa-slide-up down, right, left

<i class="fa fa-arrow-down fa-slide-up fa-5x fa-fw"></i> <i class="fa fa-arrow-up fa-slide-up fa-5x fa-fw"></i> <i class="fa fa-arrow-right fa-slide-left fa-5x fa-fw"></i> <i class="fa fa-arrow-left fa-slide-right fa-5x fa-fw"></i>

Responsive behavior

   
<i class="fa fa-globe fa-max-200"></i> &nbsp; <i class="fa fa-globe fa-max-150"></i> &nbsp; <i class="fa fa-globe fa-max-100"></i><br />

Max size

Responsive icons with max size in pixel
fa-max-50     fa-max-75     fa-max-100     fa-max-125     fa-max-150
fa-max-200     fa-max-225     fa-max-250     fa-max-275     fa-max-300

shadow

Available in back and white
fa-shadow-black   fa-shadow-black-thin   fa-shadow-black-big
fa-shadow-white   fa-shadow-white-thin   fa-shadow-white-big



Silver gradient: fa-silver


       

fa-silver-dark   fa-silver-dark-inverse   fa-silver   fa-silver-inverse   fa-silver-light   fa-silver-light -inverse

<i class="fa fa-heart fa-max-100 fa-silver-dark"></i> &nbsp; <i class="fa fa-heart fa-max-100 fa-silver-dark-inverse"></i> &nbsp; <i class="fa fa-heart fa-max-100 fa-silver"></i> &nbsp; <i class="fa fa-heart fa-max-100 fa-silver-inverse"></i> &nbsp; <i class="fa fa-heart fa-max-100 fa-silver-light"></i> <i class="fa fa-heart fa-max-100 fa-silver-light-inverse"></i>
Advanced CSS3 style, available only in Chrome and Safari , flat color in other browsers




COLORS!


Social Icon Background: fa-box-facebook


       

       

<i class="fa fa-facebook fa-box-facebook fa-2x"></i>

Background: options


       

    Eplisse   Circle   hover > Circle   Silver   Custom color

<i class="fa fa-facebook fa-box-facebook fa-box-o-half fa-3x"></i> &nbsp; <i class="fa fa-facebook fa-box-facebook fa-box-o fa-3x"></i> &nbsp; <i class="fa fa-facebook fa-box-facebook fa-box-o-square fa-shadow-black-thin fa-3x"></i> &nbsp; <i class="fa fa-facebook fa-box-silver fa-3x"></i> &nbsp; <i class="fa fa-facebook fa-box-custom fa-3x"></i>


Responsive



   


<i class="fa fa-facebook fa-box-facebook fa-max-50"></i> &nbsp; <i class="fa fa-facebook fa-box-facebook fa-max-75"></i> &nbsp; <i class="fa fa-facebook fa-box-facebook fa-max-100"></i>


Example: Style + animation



  Custom color + Pulse (loop) + Responsive behavior
<i class="fa fa-facebook fa-box-custom fa-pulse-loop fa-max-100"></i>

Examples

With our code you can add the animation to icons, text and images
New Awesome Styles

DEMO TEXT: We use cookies to ensure that we give you the best experience on our Addons website. Click here for more info.