library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

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

2
Gemfile.lock
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)

7
css/font-awesome.css vendored
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
View File

File diff suppressed because one or more lines are too long

2
css/font-awesome.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
fonts/FontAwesome.otf
View File

Binary file not shown.

7
less/spinning.less → less/animated.less
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);

2
less/extras.less
View File

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

2
less/font-awesome.less vendored
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";

3
less/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; }

3
less/variables.less
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";

5
scss/_spinning.scss → scss/_animated.scss
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);

44
scss/_extras.scss
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); }

3
scss/_icons.scss
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; }

3
scss/_variables.scss
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";

2
scss/font-awesome.scss vendored
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";

14
src/_includes/examples/spinning.html → src/_includes/examples/animated.html
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>

2
src/_includes/navbar.html
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>

6
src/_includes/tests/stacked-inside-anchor.html
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>

6
src/_includes/tests/stacked.html
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">

BIN
src/assets/font-awesome/fonts/FontAwesome.otf
View File

Binary file not shown.

7
src/assets/font-awesome/less/spinning.less → src/assets/font-awesome/less/animated.less vendored
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);

2
src/assets/font-awesome/less/font-awesome.less vendored
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";

5
src/assets/font-awesome/scss/_spinning.scss → src/assets/font-awesome/scss/_animated.scss vendored
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);

2
src/assets/font-awesome/scss/font-awesome.scss vendored
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";

2
src/examples.html
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 %}

6
src/icons.yml
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:

35
src/test.html
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>