Flipped 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-flip-horizontal to flip the icon horizontally
  • Class fa-flip-vertical to flip the icon vertically
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></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>Flipped Icons</h1>
    <i class="fa fa-shield"></i> normal<br>
    <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical<br>
</body>
</html>

Overall

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

Related Links