Font-awesome: More rotate options (fa-rotate-*)

[benalex94]

The project I am currently working on has need for (currently custom) rotated icons.

We need increments of 45 degrees rather than 90 as is currently available

Thank you

[viion]

I wouldn't personally see the need for smaller increments because some other use-case could always do even smaller, then it's like why not just add full 360 class case? then the css becomes huge.

I think smaller increments should be up to the user as it is easily done:

.fa-rotate-45 {
    transform: rotate(45deg);
}

As a SCSS loop

$max: 360;
$step: 45;
@for $i from 1 through ceil($max/$step) { 
    $value: ($i - 1)*$step + 45; 
    .fa-rotate-#{$value} { 
        transform: rotate($value+0deg);
    } 
}

Generates:

.fa-rotate-45 {
  transform: rotate(45deg);
}

.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-135 {
  transform: rotate(135deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-225 {
  transform: rotate(225deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-rotate-315 {
  transform: rotate(315deg);
}

.fa-rotate-360 {
  transform: rotate(360deg);
}

[benalex94]

Thank you so much

We were doing it in a less conventional way

This if perfect

Thank you

Benjamin Alexander
CFC Antrim Media

On 14 Feb 2016, at 13:52, Josh Freeman [email protected] wrote:

I wouldn't personally see the need for smaller increments because some other use-case could always do even smaller, then it's like why not just add full 360 class case? then the css becomes huge.

I think smaller increments should be up to the user as it is easily done:

.fa-rotate-45 {
transform: rotate(45deg);
}
As a SCSS loop

$max: 360;
$step: 45;
@for $i from 1 through ceil($max/$step) {
$value: ($i - 1)*$step + 45;
.fa-rotate-#{$value} {
transform: rotate($value+0deg);
}
}
Generates:

.fa-rotate-45 {
transform: rotate(45deg);
}

.fa-rotate-90 {
transform: rotate(90deg);
}

.fa-rotate-135 {
transform: rotate(135deg);
}

.fa-rotate-180 {
transform: rotate(180deg);
}

.fa-rotate-225 {
transform: rotate(225deg);
}

.fa-rotate-270 {
transform: rotate(270deg);
}

.fa-rotate-315 {
transform: rotate(315deg);
}

.fa-rotate-360 {
transform: rotate(360deg);
}
—
Reply to this email directly or view it on GitHub.

[tagliala]

2858 got few interest, I would go for custom css classes like @viion's ones, maybe including IE compatibility.

Take a look at https://github.com/FortAwesome/Font-Awesome/blob/master/scss/_rotated-flipped.scss and https://github.com/FortAwesome/Font-Awesome/blob/master/scss/_mixins.scss

[hackout]

custom it .

.fa-rotate-45{
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865474,SizingMethod='auto expand');
margin-left: -50%;
margin-top: -50%;
}

.fa-rotate-135{
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865477, M12=-0.7071067811865475, M21=0.7071067811865475, M22=-0.7071067811865477, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865477,M12=-0.7071067811865475,M21=0.7071067811865475,M22=-0.7071067811865477,SizingMethod='auto expand');
margin-left: -50%;
margin-top: -50%;
}

.fa-rotate-225{
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865475, M12=0.7071067811865476, M21=-0.7071067811865476, M22=-0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865475,M12=0.7071067811865476,M21=-0.7071067811865476,M22=-0.7071067811865475,SizingMethod='auto expand');
margin-left: -50%;
margin-top: -50%;
}

.fa-rotate-315{
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476,M12=0.7071067811865475,
M21=-0.7071067811865475,M22=0.7071067811865476,SizingMethod='auto expand');
margin-left: -50%;
margin-top: -50%;
}

[MrCsabaToth]

+1

[wcndave]

+1

Understand doing all degrees would be horrible, but 45 is quite common. Like a finger pointing in 4 compass directions, could also point diagonally. Arrows that are diagonal. I can think of lots of cases.