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

Gemfile

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

Gemfile.lock

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

css/font-awesome.css

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

less/spinning.less → less/animated.less

@@ -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);

less/extras.less

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

less/font-awesome.less

@@ -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";

less/icons.less

@@ -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; }

less/variables.less

@@ -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";

scss/_spinning.scss → scss/_animated.scss

@@ -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);

scss/_extras.scss

@@ -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); }

scss/_icons.scss

@@ -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; }

scss/_variables.scss

@@ -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";

scss/font-awesome.scss

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

src/_includes/examples/spinning.html → src/_includes/examples/animated.html

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

src/_includes/navbar.html

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

src/_includes/tests/stacked-inside-anchor.html

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

src/_includes/tests/stacked.html

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

src/assets/font-awesome/less/spinning.less → src/assets/font-awesome/less/animated.less

@@ -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);

src/assets/font-awesome/less/font-awesome.less

@@ -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";

src/assets/font-awesome/scss/_spinning.scss → src/assets/font-awesome/scss/_animated.scss

@@ -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);

src/assets/font-awesome/scss/font-awesome.scss

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

src/examples.html

@@ -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 %}

src/icons.yml

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

src/test.html

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