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



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

<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>


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-black fa-pulse-loop fa-max-100"></i>

Themes with Plus Code

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lode

image

LanderPro

image

Boxedo

image

Shape

image

Simplus

image

Flexer

image

Gamma

image

Anima

image

Laxis

image

Duo

image

Hoa

image

Regen

image

Duccio

image

FlexBand

image

Tilt

image

Acute

image

OldPage

image

Black Shadow

image

Xlabel

image

Xloom

image

Alphas

image

MiniMax

image

TopMenu

image

RePixel

image

Creative Tape

image

PanelsPro

image

PageMix

image

TidyBox

image

PureWhite

image