2014-01-21 23:03:43 +01:00
<!doctype html>
<!-- [if lt IE 7]> <html class="no - js lt - ie9 lt - ie8 lt - ie7"> <![endif] -->
<!-- [if IE 7]> <html class="no - js lt - ie9 lt - ie8"> <![endif] -->
<!-- [if IE 8]> <html class="no - js lt - ie9"> <![endif] -->
<!-- [if gt IE 8]><! --> < html class = "no-js" > <!-- <![endif] -->
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< title > Font Awesome Animation< / title >
< meta name = "description" content = "" >
< meta name = "viewport" content = "width=device-width" >
2014-03-07 21:13:37 +01:00
< link rel = "icon" type = "image/png" href = "favicon.png" >
2014-01-21 23:03:43 +01:00
< link href = 'http://fonts.googleapis.com/css?family=Gilda+Display' rel = 'stylesheet' type = 'text/css' >
< link rel = "stylesheet" href = "styles/main.css" >
< link rel = "stylesheet" href = "styles/monokai.syntax.css" >
< link rel = "stylesheet" href = "vendor/font-awesome/css/font-awesome.min.css" >
< link rel = "stylesheet" href = "../src/font-awesome-animation.css" >
< / head >
< body >
< header >
< h1 > < a href = "https://github.com/l-lin/font-awesome-animation" > Font Awesome Animation< / a > < / h1 >
< p >
Simple animations using < a href = "http://fortawesome.github.io/Font-Awesome/" > FontAwesome< / a > and some CSS3.
< / p >
< a href = "https://github.com/l-lin/font-awesome-animation" >
< img style = "position: absolute; top: 0; right: 0; border: 0;" src = "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt = "Fork me on GitHub" >
< / a >
< hr / >
< / header >
< div class = "container" ng-controller = "demoCtrl" >
< article >
< h1 > Getting started< / h1 >
< section >
< p >
Might not work on < IE10...
< / p >
< / section >
< section >
< h3 > Download< / h3 >
< h4 > Manually< / h4 >
< p >
The files can be downloaded from:
< ul >
< li >
2014-04-09 15:37:35 +02:00
Minified < a href = "https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.min.css" > CSS< / a > for production usage
2014-01-21 23:03:43 +01:00
< / li >
< li >
2014-04-09 15:37:35 +02:00
Un-minified < a href = "https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css" > CSS< / a > for development
2014-01-21 23:03:43 +01:00
< / li >
< / ul >
< / p >
< h4 > With < a href = "http://bower.io" > Bower< / a > < / h4 >
< br / >
< div class = "highlight" >
< pre > < code class = "bash" > < span class = "nv" > $ < / span > bower install font-awesome-animation
< / code > < / pre >
< / div >
< / section >
< section >
< h3 > Installation< / h3 >
< p >
Include the CSS file in your < code > index.html< / code > file:
< br / > < br / >
< div class = "highlight" >
< pre > < code class = "html" > < span class = "nt" > < link< / span > < span class = "na" > rel=< / span > < span class = "s" > "stylesheet"< / span > < span class = "na" > href=< / span > < span class = "s" > "font-awesome-animation.min.css"< / span > < span class = "nt" > > < / span > < / code > < / pre >
< / div >
< / p >
< / section >
< / article >
< article >
< h1 > Usage< / h1 >
< section >
< p >
Add the desired CSS class to the icon (or any element of your DOM).
< / p >
< br / >
< div class = "demo" >
< div class = "animation" >
< div class = "font-animation" >
< h3 >
On DOM load
< / h3 >
< / div >
< div class = "font-animation" >
< h3 >
On hover
< / h3 >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-wrench faa-wrench animated" > < / i >
faa-wrench animated
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-wrench faa-wrench animated-hover" > < / i >
faa-wrench animated-hover
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-bell faa-ring animated" > < / i >
faa-ring animated
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-bell faa-ring animated-hover" > < / i >
faa-ring animated-hover
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-envelope faa-horizontal animated" > < / i >
faa-horizontal animated
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-envelope faa-horizontal animated-hover" > < / i >
faa-horizontal animated-hover
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-thumbs-o-up faa-vertical animated" > < / i >
faa-vertical animated
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-thumbs-o-up faa-vertical animated-hover" > < / i >
faa-vertical animated-hover
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-warning faa-flash animated" > < / i >
faa-flash animated
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
2014-01-24 14:25:06 +01:00
< i class = "fa fa-warning faa-flash animated-hover" > < / i >
faa-flash animated-hover
< / a >
< / div >
< / div >
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-thumbs-o-up faa-bounce animated" > < / i >
faa-bounce animated
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-thumbs-o-up faa-bounce animated-hover" > < / i >
faa-bounce animation-hover
2014-01-21 23:03:43 +01:00
< / a >
< / div >
< / div >
2014-01-24 17:16:56 +01:00
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-spinner faa-spin animated" > < / i >
faa-spin animated
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-spinner faa-spin animated-hover" > < / i >
faa-spin animation-hover
< / a >
< / div >
< / div >
2014-01-24 17:34:05 +01:00
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-plane faa-float animated" > < / i >
faa-float animated
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-plane faa-float animated-hover" > < / i >
faa-float animation-hover
< / a >
< / div >
< / div >
2014-01-24 19:44:01 +01:00
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-heart faa-pulse animated" > < / i >
faa-pulse animated
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-heart faa-pulse animated-hover" > < / i >
faa-pulse animation-hover
< / a >
< / div >
< / div >
2014-02-07 15:25:25 +01:00
< div class = "animation" >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-envelope faa-shake animated" > < / i >
faa-shake animated
< / a >
< / div >
< div class = "font-animation" >
< a href = "#" >
< i class = "fa fa-envelope faa-shake animated-hover" > < / i >
faa-shake animation-hover
< / a >
< / div >
< / div >
2014-01-21 23:03:43 +01:00
< / div >
< / section >
< / article >
< / div >
< footer >
2014-01-24 19:44:01 +01:00
Designed and built with < i class = "fa fa-heart faa-pulse animated" > < / i > by < a href = "https://github.com/l-lin" > Louis LIN< / a >
2014-01-21 23:03:43 +01:00
< / footer >
< / body >
< / html >
