rotation and flipping of icons fixing #127

6 files changed, 105 insertions, 3 deletions

diff --git a/build/_includes/tests/rotated-flipped.html b/build/_includes/tests/rotated-flipped.html
new file mode 100644
index 000000000..3e973a87d
--- /dev/null
+++ b/build/_includes/tests/rotated-flipped.html
@@ -0,0 +1,6 @@
+<i class="icon-shield"></i>&nbsp; normal<br>
+<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
+<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
+<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
+<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
+<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
diff --git a/build/_includes/tests/stacked-icons.html b/build/_includes/tests/stacked.html
index 36e427f78..36e427f78 100644
--- a/build/_includes/tests/stacked-icons.html
+++ b/build/_includes/tests/stacked.html
diff --git a/build/assets/font-awesome/css/font-awesome.css b/build/assets/font-awesome/css/font-awesome.css
index 46c03e26d..ffc37bfa2 100644
--- a/build/assets/font-awesome/css/font-awesome.css
+++ b/build/assets/font-awesome/css/font-awesome.css
@@ -318,6 +318,45 @@ ul.icons-ul > li .icon-li {
     transform: rotate(359deg);
   }
 }
+/* Icon rotations and mirroring */
+.icon-rotate-90:before {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+.icon-rotate-180:before {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+.icon-rotate-270:before {
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+.icon-flip-horizontal:before {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.icon-flip-vertical:before {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .icon-glass:before {
diff --git a/build/assets/font-awesome/less/extras.less b/build/assets/font-awesome/less/extras.less
index ff4344691..3d16eb6f3 100644
--- a/build/assets/font-awesome/less/extras.less
+++ b/build/assets/font-awesome/less/extras.less
@@ -33,3 +33,47 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
 }
+
+/* Icon rotations and mirroring */
+.icon-rotate-90:before{
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+
+.icon-rotate-180:before{
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+.icon-rotate-270:before{
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+.icon-flip-horizontal:before {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.icon-flip-vertical:before {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
\ No newline at end of file
diff --git a/build/assets/font-awesome/less/mixins.less b/build/assets/font-awesome/less/mixins.less
index df4c41fbb..703e22fd1 100644
--- a/build/assets/font-awesome/less/mixins.less
+++ b/build/assets/font-awesome/less/mixins.less
@@ -31,4 +31,4 @@
       line-height: inherit;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/build/test.html b/build/test.html
index 9048b8aff..3efffbef2 100644
--- a/build/test.html
+++ b/build/test.html
@@ -583,10 +583,23 @@ title: Font Awesome Visual Test Cases
 
   <h3>Stacked icons</h3>
   <div class="well">
-    {% include tests/stacked-icons.html %}
+    {% include tests/stacked.html %}
   </div>
   <div class="well lead">
-    {% include tests/stacked-icons.html %}
+    {% include tests/stacked.html %}
   </div>
+
+  <h3>Mirrored and rotated icons</h3>
+  <div class="row">
+    <div class="span6">
+      <div class="well">
+        {% include tests/rotated-flipped.html %}
+      </div>
+    </div>
+    <div class="span6">
+      <div class="well lead">
+        {% include tests/rotated-flipped.html %}
+      </div>
+    </div>
 </div>
 </section>