How to Rotate a Font Icon 45 Degrees

Statically rotate font-awesome icons

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

How can I rotate a font icon 45 degrees?

The reason why the icon does not rotate in it's 'raw' state is because it's default display setting is inline.

You cannot apply transforms to inline elements like this.

To solve the problem just apply `display:inline-block".

@font-face {  font-family: 'Flaticon';  src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype');  font-weight: normal;  font-style: normal;}[class^="flaticon-"]:before,[class*=" flaticon-"]:before,[class^="flaticon-"]:after,[class*=" flaticon-"]:after {  font-family: Flaticon;  font-size: 20px;  font-style: normal;  margin-left: 20px;}.flaticon-hand-10:before {  content: "\e000";}.gly-rotate-45 {  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);  transform: rotate(45deg);  display: inline-block;}

<i class="flaticon-hand-10 gly-rotate-45"></i>

How to rotate 180 deg a fontawesome icon?

This helped me:

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

How to rotate font awesome icon in react native?

You can use the style prop to rotate the icon. Change the degree/direction of rotation as required

<Icon name={'hand-holding-usd'}
      size={20}
      style={{transform: [{rotateY: '180deg'}]}}/>

Rotate Font Awesome Icon On Click

I believe it would be easier to do this with CSS transitions:

CSS

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery

$(".rotate").click(function(){
    $(this).toggleClass("down"); 
});

Demo fiddle

Rotating a font awesome icon on hover

You need to define the fa-spin keyframe.

CSS:

.fa-spin-hover:hover {
    animation: fa-spin 2s infinite linear;
}
// The animation bellow is taken from font-awesome.css
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transfo rm:rotate(359deg);transform:rotate(359deg)}}

HTML

 <i class="fa fa-refresh fa-2x fa-spin-hover"></i>

Demo: http://jsfiddle.net/uevfyghr/1/

How to align font-awesome icon vertically

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><i class="fa fa-battery-full" aria-hidden="true"></i>