How to align font-awesome icon vertically
I am using font-awesome for the accumulator, but it is horizontally aligned. I need it vertically. I can get it.
M using this
<i class="fa fa-battery-full" aria-hidden="true"></i>
Actual result
This is the expected result
.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>
Using your own font class classes from the documentation
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-battery-full fa-rotate-270" aria-hidden="true"></i>
-
fa-rotate-90
-
fa-rotate-180
-
fa-rotate-270
-
fa-flip-horizontal
-
fa-flip-vertical
You can achieve this in two ways: by using FA classes or by adding some transform styles to the tag, or by adding another class with the following styles.
To use the FA classes, use the "fa-rotate-270" class to rotate the icon 270 degrees clockwise:
<i class="fa fa-battery-full fa-rotate-270"/></i>
The above rotation only supports rotation operations '90' '180' and '270'.
If you want to apply the transform instead (you can probably tweak it further), your code will look like this:
<i class="fa fa-battery-full" style="transform: rotate(-90deg);" aria-hidden="true"></i>
Also note that the following transforms are cross-browser compatible if you want to be compatible.
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
Using jQuery:
$(function(){
$('.fa.fa-battery-full').css({"transform": "rotate("+-90+"deg)"});
});
jsfiddle
use css property transform: rotate(-90deg);
, .fa-battery-full{ transform: rotate(-90deg);}
.
Use CSS to rotate the icon.
.fa.fa-battery-full { transform: rotate(270deg); }
<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>