Clever Geek Handbook

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

enter image description here

This is the expected result enter image description here

+3


source to share


6 answers 




.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>
Run codeHide result


0


source


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>
Run codeHide result


  • fa-rotate-90

  • fa-rotate-180

  • fa-rotate-270

  • fa-flip-horizontal

  • fa-flip-vertical

+4


source


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);
+3


source


Using jQuery:

 $(function(){
     $('.fa.fa-battery-full').css({"transform": "rotate("+-90+"deg)"});
  });

jsfiddle

+1


source


use css property transform: rotate(-90deg);

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

.

0


source


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>
Run codeHide result


0


source






More articles:


All Articles