diff options
author | davegandy <dave@davegandy.com> | 2013-05-08 03:38:18 +0400 |
---|---|---|
committer | davegandy <dave@davegandy.com> | 2013-05-08 03:38:18 +0400 |
commit | a69bf575b473636b5631319c0ac2ee47015284a7 (patch) | |
tree | 3e1b10aec0fdd5acfbdb00d44095c60d0ca3ba74 /build | |
parent | 9091ccc0a78ca22f3260f8474bb0a56e08f8c3be (diff) |
rotation and flipping of icons fixing #127
Diffstat (limited to 'build')
-rw-r--r-- | build/_includes/tests/rotated-flipped.html | 6 | ||||
-rw-r--r-- | build/_includes/tests/stacked.html (renamed from build/_includes/tests/stacked-icons.html) | 0 | ||||
-rw-r--r-- | build/assets/font-awesome/css/font-awesome.css | 39 | ||||
-rw-r--r-- | build/assets/font-awesome/less/extras.less | 44 | ||||
-rw-r--r-- | build/assets/font-awesome/less/mixins.less | 2 | ||||
-rw-r--r-- | build/test.html | 17 |
6 files changed, 105 insertions, 3 deletions
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 @@ +<i class="icon-shield"></i> normal<br> +<i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> +<i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> +<i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> +<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> +<i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical diff --git a/build/_includes/tests/stacked-icons.html b/build/_includes/tests/stacked.html index 36e427f78..36e427f78 100644 --- a/build/_includes/tests/stacked-icons.html +++ b/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 <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> |