FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2025-01-14 01:00:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

use font-awesome 5 for demo #26

Browse Source
This commit is contained in:
Louis LIN 2018-04-30 15:16:16 +02:00
parent aab7d1df98
commit 2e169bfd54
3 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/partials/getting_started.html
View File

@ -17,15 +17,15 @@
</li>
</ul>
</p>
<h4>With <a href="http://bower.io">Bower</a></h4>
<h4>With <a href="https://www.npmjs.com/">NPM</a></h4>
<div class="highlight">
<pre><code class="bash"><span class="nv">$ </span>bower install font-awesome-animation</code></pre>
<pre><code class="bash"><span class="nv">$ </span>npm install font-awesome-animation</code></pre>
</div>
</section>
<section>
<h3>Installation</h3>
<p>
Include the JS and CSS file in your <code>index.html</code> file:
Include the CSS file in your <code>index.html</code> file:
<br />
<div class="highlight">
<pre><code class="html"><span class="nt">&lt;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">&gt;</span>

90
demo/partials/usage.html
View File

@ -29,19 +29,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated"></i>
<i class="fas fa-wrench faa-wrench animated"></i>
&nbsp;faa-wrench animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated-hover"></i>
<i class="fas fa-wrench faa-wrench animated-hover"></i>
&nbsp;faa-wrench animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-wrench faa-wrench"></i>
<i class="fas fa-wrench faa-wrench"></i>
&nbsp;faa-wrench
</a>
</div>
@ -49,19 +49,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated"></i>
<i class="fas fa-bell faa-ring animated"></i>
&nbsp;faa-ring animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated-hover"></i>
<i class="fas fa-bell faa-ring animated-hover"></i>
&nbsp;faa-ring animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-bell faa-ring"></i>
<i class="fas fa-bell faa-ring"></i>
&nbsp;faa-ring
</a>
</div>
@ -69,19 +69,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated"></i>
<i class="fas fa-envelope faa-horizontal animated"></i>
&nbsp;faa-horizontal animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated-hover"></i>
<i class="fas fa-envelope faa-horizontal animated-hover"></i>
&nbsp;faa-horizontal animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-horizontal"></i>
<i class="fas fa-envelope faa-horizontal"></i>
&nbsp;faa-horizontal
</a>
</div>
@ -89,19 +89,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated"></i>
<i class="fas fa-thumbs-up faa-vertical animated"></i>
&nbsp;faa-vertical animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
<i class="fas fa-thumbs-up faa-vertical animated-hover"></i>
&nbsp;faa-vertical animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-vertical"></i>
<i class="fas fa-thumbs-up faa-vertical"></i>
&nbsp;faa-vertical
</a>
</div>
@ -109,19 +109,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated"></i>
<i class="fas fa-exclamation-triangle faa-flash animated"></i>
&nbsp;faa-flash animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated-hover"></i>
<i class="fas fa-exclamation-triangle faa-flash animated-hover"></i>
&nbsp;faa-flash animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-warning faa-flash"></i>
<i class="fas fa-exclamation-triangle faa-flash"></i>
&nbsp;faa-flash
</a>
</div>
@ -129,19 +129,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated"></i>
<i class="fas fa-thumbs-up faa-bounce animated"></i>
&nbsp;faa-bounce animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
<i class="fas fa-thumbs-up faa-bounce animated-hover"></i>
&nbsp;faa-bounce animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-bounce"></i>
<i class="fas fa-thumbs-up faa-bounce"></i>
&nbsp;faa-bounce
</a>
</div>
@ -149,19 +149,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated"></i>
<i class="fas fa-spinner faa-spin animated"></i>
&nbsp;faa-spin animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated-hover"></i>
<i class="fas fa-spinner faa-spin animated-hover"></i>
&nbsp;faa-spin animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-spinner faa-spin"></i>
<i class="fas fa-spinner faa-spin"></i>
&nbsp;faa-spin
</a>
</div>
@ -169,19 +169,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated"></i>
<i class="fas fa-plane faa-float animated"></i>
&nbsp;faa-float animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated-hover"></i>
<i class="fas fa-plane faa-float animated-hover"></i>
&nbsp;faa-float animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-plane faa-float"></i>
<i class="fas fa-plane faa-float"></i>
&nbsp;faa-float
</a>
</div>
@ -189,19 +189,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated"></i>
<i class="fas fa-heart faa-pulse animated"></i>
&nbsp;faa-pulse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated-hover"></i>
<i class="fas fa-heart faa-pulse animated-hover"></i>
&nbsp;faa-pulse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-heart faa-pulse"></i>
<i class="fas fa-heart faa-pulse"></i>
&nbsp;faa-pulse
</a>
</div>
@ -209,19 +209,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated"></i>
<i class="fas fa-envelope faa-shake animated"></i>
&nbsp;faa-shake animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated-hover"></i>
<i class="fas fa-envelope faa-shake animated-hover"></i>
&nbsp;faa-shake animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-shake"></i>
<i class="fas fa-envelope faa-shake"></i>
&nbsp;faa-shake
</a>
</div>
@ -229,19 +229,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated"></i>
<i class="fas fa-trophy faa-tada animated"></i>
&nbsp;faa-tada animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated-hover"></i>
<i class="fas fa-trophy faa-tada animated-hover"></i>
&nbsp;faa-tada animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-trophy faa-tada"></i>
<i class="fas fa-trophy faa-tada"></i>
&nbsp;faa-tada
</a>
</div>
@ -249,19 +249,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated"></i>
<i class="fas fa-space-shuttle faa-passing animated"></i>
&nbsp;faa-passing animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated-hover"></i>
<i class="fas fa-space-shuttle faa-passing animated-hover"></i>
&nbsp;faa-passing animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing"></i>
<i class="fas fa-space-shuttle faa-passing"></i>
&nbsp;faa-passing
</a>
</div>
@ -269,19 +269,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated"></i>
<i class="fas fa-space-shuttle faa-passing-reverse animated"></i>
&nbsp;faa-passing-reverse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i>
<i class="fas fa-space-shuttle faa-passing-reverse animated-hover"></i>
&nbsp;faa-passing-reverse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing-reverse"></i>
<i class="fas fa-space-shuttle faa-passing-reverse"></i>
&nbsp;faa-passing-reverse
</a>
</div>
@ -289,19 +289,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-circle-o faa-burst animated"></i>
<i class="fas fa-circle faa-burst animated"></i>
&nbsp;faa-burst animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-circle-o faa-burst animated-hover"></i>
<i class="fas fa-circle faa-burst animated-hover"></i>
&nbsp;faa-burst animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-circle-o faa-burst"></i>
<i class="fas fa-circle faa-burst"></i>
&nbsp;faa-burst
</a>
</div>
@ -309,19 +309,19 @@
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-star-o faa-falling animated"></i>
<i class="fas fa-star faa-falling animated"></i>
&nbsp;faa-falling animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-star-o faa-falling animated-hover"></i>
<i class="fas fa-star faa-falling animated-hover"></i>
&nbsp;faa-falling animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-star-o faa-falling"></i>
<i class="fas fa-star faa-falling"></i>
&nbsp;faa-falling
</a>
</div>

12
index.html
View File

@ -10,13 +10,13 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="favicon.png">
<link href='http://fonts.googleapis.com/css?family=Gilda+Display' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/monokai.css">
<link rel="stylesheet" href="dist/font-awesome-animation.min.css">
<link rel="stylesheet" href="dist/font-awesome-animation.min.css">
</head>
<body ng-app="fontAwesomeAnimationDemoApp">
<div class="github-ribbon">
@ -30,12 +30,12 @@
Simple animations using <a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a> and some CSS3.
</p>
</header>
<div class="main-container">
<div class="container">
<article class="main-content">
<header class="article-header">
<h1><i class="fa fa-gear faa-spin animated"></i>&nbsp;Getting started</h1>
<h1><i class="fas fa-cog faa-spin animated"></i>&nbsp;Getting started</h1>
</header>
<section class="article-content" ng-include="'demo/partials/getting_started.html'"></section>
</article>
@ -59,7 +59,7 @@
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="demo/app.js"></script>
</body>
</html>