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 @@ +  normal
+  icon-rotate-90
+  icon-rotate-180
+  icon-rotate-270
+  icon-flip-horizontal
+  icon-flip-vertical diff --git a/build/_includes/tests/stacked-icons.html b/build/_includes/tests/stacked.html similarity index 100% rename from build/_includes/tests/stacked-icons.html rename to 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

Stacked icons

- {% include tests/stacked-icons.html %} + {% include tests/stacked.html %}
- {% include tests/stacked-icons.html %} + {% include tests/stacked.html %}
+ +

Mirrored and rotated icons

+
+
+
+ {% include tests/rotated-flipped.html %} +
+
+
+
+ {% include tests/rotated-flipped.html %} +
+