updating fa-spinner to addres #671, adding fa-pulse class for an 8 step animation

This commit is contained in:
Dave Gandy 2015-01-22 10:48:08 -05:00
parent b5c84a9634
commit 89a28f8b1f
28 changed files with 106 additions and 74 deletions

View File

@ -1,3 +1,4 @@
source 'https://rubygems.org'
gem 'jekyll', '~> 1.0'
gem 'sass', '~> 3.0'

View File

@ -40,6 +40,7 @@ GEM
ffi (>= 0.5.0)
redcarpet (2.3.0)
safe_yaml (1.0.3)
sass (3.4.9)
toml (0.1.1)
parslet (~> 1.5.0)
yajl-ruby (1.1.0)
@ -49,3 +50,4 @@ PLATFORMS
DEPENDENCIES
jekyll (~> 1.0)
sass (~> 3.0)

View File

@ -80,6 +80,10 @@
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
@ -610,6 +614,7 @@
.fa-twitter:before {
content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
content: "\f09a";
}
@ -1759,7 +1764,7 @@
.fa-neuter:before {
content: "\f22c";
}
.fa-facebook-f:before {
.fa-facebook-official:before {
content: "\f230";
}
.fa-pinterest-p:before {

7
css/font-awesome.css.map Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -1,4 +1,4 @@
// Spinning Icons
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
@ -6,6 +6,11 @@
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);

View File

@ -1,2 +0,0 @@
// Extras
// --------------------------

View File

@ -11,7 +11,7 @@
@import "fixed-width.less";
@import "list.less";
@import "bordered-pulled.less";
@import "spinning.less";
@import "animated.less";
@import "rotated-flipped.less";
@import "stacked.less";
@import "icons.less";

View File

@ -158,6 +158,7 @@
.@{fa-css-prefix}-bookmark-o:before { content: @fa-var-bookmark-o; }
.@{fa-css-prefix}-phone-square:before { content: @fa-var-phone-square; }
.@{fa-css-prefix}-twitter:before { content: @fa-var-twitter; }
.@{fa-css-prefix}-facebook-f:before,
.@{fa-css-prefix}-facebook:before { content: @fa-var-facebook; }
.@{fa-css-prefix}-github:before { content: @fa-var-github; }
.@{fa-css-prefix}-unlock:before { content: @fa-var-unlock; }
@ -581,7 +582,7 @@
.@{fa-css-prefix}-mars-stroke-v:before { content: @fa-var-mars-stroke-v; }
.@{fa-css-prefix}-mars-stroke-h:before { content: @fa-var-mars-stroke-h; }
.@{fa-css-prefix}-neuter:before { content: @fa-var-neuter; }
.@{fa-css-prefix}-facebook-f:before { content: @fa-var-facebook-f; }
.@{fa-css-prefix}-facebook-official:before { content: @fa-var-facebook-official; }
.@{fa-css-prefix}-pinterest-p:before { content: @fa-var-pinterest-p; }
.@{fa-css-prefix}-whatsapp:before { content: @fa-var-whatsapp; }
.@{fa-css-prefix}-server:before { content: @fa-var-server; }

View File

@ -199,7 +199,8 @@
@fa-var-eye-slash: "\f070";
@fa-var-eyedropper: "\f1fb";
@fa-var-facebook: "\f09a";
@fa-var-facebook-f: "\f230";
@fa-var-facebook-f: "\f09a";
@fa-var-facebook-official: "\f230";
@fa-var-facebook-square: "\f082";
@fa-var-fast-backward: "\f049";
@fa-var-fast-forward: "\f050";

View File

@ -6,6 +6,11 @@
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);

View File

@ -1,44 +0,0 @@
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
/* Animated rotating icon */
.#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
// Icon rotations & flipping
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }

View File

@ -158,6 +158,7 @@
.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; }
.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; }
.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; }
.#{$fa-css-prefix}-facebook-f:before,
.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; }
.#{$fa-css-prefix}-github:before { content: $fa-var-github; }
.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; }
@ -581,7 +582,7 @@
.#{$fa-css-prefix}-mars-stroke-v:before { content: $fa-var-mars-stroke-v; }
.#{$fa-css-prefix}-mars-stroke-h:before { content: $fa-var-mars-stroke-h; }
.#{$fa-css-prefix}-neuter:before { content: $fa-var-neuter; }
.#{$fa-css-prefix}-facebook-f:before { content: $fa-var-facebook-f; }
.#{$fa-css-prefix}-facebook-official:before { content: $fa-var-facebook-official; }
.#{$fa-css-prefix}-pinterest-p:before { content: $fa-var-pinterest-p; }
.#{$fa-css-prefix}-whatsapp:before { content: $fa-var-whatsapp; }
.#{$fa-css-prefix}-server:before { content: $fa-var-server; }

View File

@ -199,7 +199,8 @@ $fa-var-eye: "\f06e";
$fa-var-eye-slash: "\f070";
$fa-var-eyedropper: "\f1fb";
$fa-var-facebook: "\f09a";
$fa-var-facebook-f: "\f230";
$fa-var-facebook-f: "\f09a";
$fa-var-facebook-official: "\f230";
$fa-var-facebook-square: "\f082";
$fa-var-fast-backward: "\f049";
$fa-var-fast-forward: "\f050";

View File

@ -11,7 +11,7 @@
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";

View File

@ -1,15 +1,16 @@
<section id="spinning">
<section id="animated">
<h2 class="page-header">
Spinning Icons
Animated Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/spinning.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_spinning.scss" class="text-muted">View SASS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/animated.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_animated.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-pulse"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
@ -17,11 +18,12 @@
</div>
<div class="col-md-9 col-sm-8">
<p>
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>fa-refresh</code>, and <code>fa-cog</code>.
Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
</p>
{% highlight html %}
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

View File

@ -44,7 +44,7 @@
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#animated"><i class="fa fa-spinner fa-fw"></i>&nbsp; Animated Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>

View File

@ -9,7 +9,7 @@
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
@ -32,7 +32,7 @@
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
@ -55,7 +55,7 @@
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
</a>

View File

@ -13,7 +13,7 @@
Twitter Icon
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
@ -30,7 +30,7 @@
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
@ -47,7 +47,7 @@
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
<span class="fa-stack">

View File

@ -1,7 +1,7 @@
---
---
// Spinning Icons
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
@ -9,6 +9,11 @@
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);

View File

@ -10,7 +10,7 @@
@import "fixed-width.less";
@import "list.less";
@import "bordered-pulled.less";
@import "spinning.less";
@import "animated.less";
@import "rotated-flipped.less";
@import "stacked.less";
@import "icons.less";

View File

@ -9,6 +9,11 @@
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);

View File

@ -10,7 +10,7 @@
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";

View File

@ -25,7 +25,7 @@ relative_path: ../
{% include examples/fixed-width.html %}
{% include examples/list.html %}
{% include examples/bordered-pulled.html %}
{% include examples/spinning.html %}
{% include examples/animated.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/bootstrap.html %}

View File

@ -1565,6 +1565,8 @@ icons:
id: facebook
unicode: f09a
created: 2.0
aliases:
- facebook-f
filter:
- social network
categories:
@ -4973,8 +4975,8 @@ icons:
- Gender Icons
- name: Facebook f
id: facebook-f
- name: Facebook Official
id: facebook-official
unicode: f230
created: 4.3
categories:

View File

@ -762,4 +762,39 @@ relative_path: ../
</div>
</div>
<h3>Animation Wobble <a href="https://github.com/FortAwesome/Font-Awesome/issues/671">#671</a></h3>
<div>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-spin"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-spin"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-spin"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-pulse"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-pulse"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-pulse"></i></span>
</div>
<div>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-spin fa-5x"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-spin fa-5x"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-spin fa-5x"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-spinner fa-pulse fa-5x"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-cog fa-pulse fa-5x"></i></span>
<span style="border: solid 1px #d3d3d3; display:inline-block;"><i class="fa fa-circle-o-notch fa-pulse fa-5x"></i></span>
</div>
<div>
<button class="btn btn-default"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default"><i class="fa fa-cog fa-spin"></i></button>
<button class="btn btn-default"><i class="fa fa-circle-o-notch fa-spin"></i></button>
<button class="btn btn-default"><i class="fa fa-spinner fa-pulse"></i></button>
<button class="btn btn-default"><i class="fa fa-cog fa-pulse"></i></button>
<button class="btn btn-default"><i class="fa fa-circle-o-notch fa-pulse"></i></button>
</div>
<div>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-pulse"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-cog fa-pulse"></i></button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-pulse"></i></button>
</div>
</section>