FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-28 22:41:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing #1130

Browse Source
This commit is contained in:
davegandy 2013-05-23 17:10:47 -04:00
parent 584f720436
commit fe004a9336
4 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build/_includes/tests/rotated-flipped-inside-anchor.html Normal file
View File

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

6
build/_includes/tests/rotated-flipped-inside-btn.html Normal file
View File

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

15
build/assets/font-awesome/less/extras.less vendored
View File

@ -35,7 +35,7 @@
} }
/* Icon rotations and mirroring */ /* Icon rotations and mirroring */
.icon-rotate-90:before{ .icon-rotate-90:before {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg);
@ -44,7 +44,7 @@
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
} }
.icon-rotate-180:before{ .icon-rotate-180:before {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
-ms-transform: rotate(180deg); -ms-transform: rotate(180deg);
@ -53,7 +53,7 @@
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
} }
.icon-rotate-270:before{ .icon-rotate-270:before {
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
-ms-transform: rotate(270deg); -ms-transform: rotate(270deg);
@ -76,4 +76,11 @@
-ms-transform: scale(1, -1); -ms-transform: scale(1, -1);
-o-transform: scale(1, -1); -o-transform: scale(1, -1);
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; }
}
}

16
build/test.html
View File

@ -602,5 +602,19 @@ relative_path: ../
{% include tests/rotated-flipped.html %} {% include tests/rotated-flipped.html %}
</div> </div>
</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> </section>