Rotated Icons

We know that Font Awesome Icons are super useful, but what happens if you need to rotate an icon in a certain direction to suit your requirement.

Font Awesome has provided the below classes to achieve that

  • Class fa-rotate-90 to rotate an icon 90 degrees clockwise
  • Class fa-rotate-180 to rotate an icon 180 degrees clockwise
  • Class fa-rotate-270 to rotate an icon 270 degrees clockwise
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="font-size: 20px;">    
    <h1>Rotated Icons</h1>
    <i class="fa fa-shield"></i> normal<br>
    <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
    <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
    <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
</body>
</html>

Overall

Font Awesome has provided predefined classes to rotate and use the icons as needed.

Related Links