Permalink
Browse files

rotation and flipping of icons fixing #127

  • Loading branch information...
davegandy committed May 7, 2013
1 parent 9091ccc commit a69bf575b473636b5631319c0ac2ee47015284a7
@@ -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
@@ -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 {
@@ -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);
}
@@ -31,4 +31,4 @@
line-height: inherit;
}
}
}
}
View
@@ -583,10 +583,23 @@ <h4>icon-large</h4>
<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>

0 comments on commit a69bf57

Please sign in to comment.