Rotate, Flip and Resize icons in Kendo UI Mobile

Question

Is it possible to rotate (90-180-270 degrees), flip (horizontal/vertical) and resize (2x, 3x) icons easily in kendo-ui mobile?

Answer 1

You can do rotate easily with CSS transforms, something like this:

<style>
    .km-home:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>

You can flip an element with CSS transforms too:

<style>
    .km-home:after {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
</style>

You can also use scale to resize it - scale(2), etc...

However this question has nothing to do with Kendo UI :)

Answer 2

Here is an example implementation of previous and next buttons using a custom kendo mobile icon based on Bundyo's insights:

<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>

CSS:

.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after, 
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }