Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Statically rotate font-awesome icons

I'd like to statically rotate my font-awesome icons by 45 degrees. It says on the site that:

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

However, doing

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> 

does not work, whereas replacing fa-rotate-45 with fa-rotate-90 does. Does this mean that they in fact cannot rotate arbitrarily?

like image 296
user592419 Avatar asked Mar 30 '14 17:03

user592419


People also ask

Can I rotate a font awesome icon?

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

How do I rotate an icon in react?

You can rotate icon by 90, 180 and 270 degrees. To do that, add rotate attribute. Possible values: "90deg", "1": rotate by 90 degrees.

How do you rotate an object in CSS?

The CSS rotate() function lets you rotate an element on a 2D axis. The rotate() function accepts one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counter-clockwise.


2 Answers

Before FontAwesome 5:

The standard declarations just contain .fa-rotate-90, .fa-rotate-180 and .fa-rotate-270. However you can easily create your own:

.fa-rotate-45 {     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);     transform: rotate(45deg); } 

With FontAwesome 5:

You can use what’s so called “Power Transforms”. Example:

<i class="fas fa-snowman" data-fa-transform="rotate-90"></i> <i class="fas fa-snowman" data-fa-transform="rotate-180"></i> <i class="fas fa-snowman" data-fa-transform="rotate-270"></i> <i class="fas fa-snowman" data-fa-transform="rotate-30"></i> <i class="fas fa-snowman" data-fa-transform="rotate--30"></i> 

You need to add the data-fa-transform attribute with the value of rotate- and your desired rotation in degrees.

Source: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

like image 84
KittMedia Avatar answered Oct 10 '22 05:10

KittMedia


In case someone else stumbles upon this question and wants it here is the SASS mixin I use.

@mixin rotate($deg: 90){     $sDeg: #{$deg}deg;      -webkit-transform: rotate($sDeg);     -moz-transform: rotate($sDeg);     -ms-transform: rotate($sDeg);     -o-transform: rotate($sDeg);     transform: rotate($sDeg); } 
like image 44
PseudoNinja Avatar answered Oct 10 '22 07:10

PseudoNinja