CODEWITHSUNDEEP
htmlcssfont-awesome
ashish.g
ashish.g

Reputation: 588

How to align font-awesome icon vertically

I am using font-awesome for battery but it is aligned horizontally. I need it vertically. I can i 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

Upvotes: 3

Views: 1033

Answers (6)

amrender singh
amrender singh

Reputation: 8239

Using jQuery:

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

jsfiddle

Upvotes: 0

rgunning
rgunning

Reputation: 568

Using native font-awesome 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

Upvotes: 5

Amon Jafarbay
Amon Jafarbay

Reputation: 56

You can achieve this 2 ways: using the FA classes or by adding some transformation styles to the tag or adding another class with the following styles.

To use FA classes use the class 'fa-rotate-270' to rotate your icon 270 degrees clockwise:

<i class="fa fa-battery-full fa-rotate-270"/></i>

The above rotaion supports rotation steps of '90' '180' and '270' only.

If you wanted to apply a transformation instead (potentially you could customise further this way) your code would look like this:

<i class="fa fa-battery-full" style="transform: rotate(-90deg);" aria-hidden="true"></i>

Also please note that the following are cross browser compatible versions of the transformation if you want to ensure compatibility.

-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);

Upvotes: 3

Swapnil Patil
Swapnil Patil

Reputation: 942

.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>

Upvotes: -1

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Anup Mishra
Anup Mishra

Reputation: 149

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

Upvotes: 0

Related Questions