Font Awesome V4 - Rotated Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to define Font Awesome Rotated Icons using the predefined classes fa-rotate-90, fa-rotate-180, and fa-rotate-270.

Run this on IDE

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

This example helps us understand how to create Font Awesome Rotated Icons.

Related Links