rotation and flipping of icons fixing #127

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

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 {

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

build/assets/font-awesome/less/mixins.less

@@ -31,4 +31,4 @@
       line-height: inherit;
     }
   }
-}
+}

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>