fixing #1130

build/_includes/tests/rotated-flipped-inside-anchor.html

@@ -0,0 +1,6 @@
+<a href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
+<a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
+<a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
+<a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
+<a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
+<a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>

build/_includes/tests/rotated-flipped-inside-btn.html

@@ -0,0 +1,6 @@
+<a class="btn" href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
+<a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
+<a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
+<a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
+<a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
+<a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>

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

@@ -35,7 +35,7 @@
 }
 
 /* Icon rotations and mirroring */
-.icon-rotate-90:before{
+.icon-rotate-90:before {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
@@ -44,7 +44,7 @@
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 }
 
-.icon-rotate-180:before{
+.icon-rotate-180:before {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -53,7 +53,7 @@
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 }
 
-.icon-rotate-270:before{
+.icon-rotate-270:before {
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
@@ -76,4 +76,11 @@
   -ms-transform: scale(1, -1);
   -o-transform: scale(1, -1);
   transform: scale(1, -1);
-}
+}
+
+/* ensure rotation occurs inside anchor tags */
+a {
+  .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
+    &:before { display: inline-block; }
+  }
+}

build/test.html

@@ -602,5 +602,19 @@ relative_path: ../
         {% include tests/rotated-flipped.html %}
       </div>
     </div>
-</div>
+  </div>
+  <h4>Mirrored and rotated icons inside anchors and buttons</h4>
+  <div class="row">
+    <div class="span6">
+      <div class="well">
+        {% include tests/rotated-flipped-inside-anchor.html %}
+      </div>
+    </div>
+    <div class="span6">
+      <div class="well">
+        {% include tests/rotated-flipped-inside-btn.html %}
+      </div>
+    </div>
+  </div>
+
 </section>