Semantic-UI Icon Rotated Variation

Last Updated : 14 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Icon is a glyph that is used to display something else in place of text to save space and time. Icons are used to help users to navigate around and have the same meaning across all languages and hence many items need not be written in different languages.

Semantic UI Icon Rotated Variation helps us to rotate the icon either clockwise or counterclockwise. The icons are rotated 90 degrees in either direction.

Semantic UI Icon Rotated Variation Classes:

clockwise: Rotates the icon in the direction of the clock in 90 degrees.
counterclockwise: Rotates the icon opposite to the direction of the clock in 90 degrees.

Syntax: Add the clockwise rotated or counterclockwise rotated class to the icon as follows to rotate the icons:

<i class="clockwise rotated icon">
    ...
</i>

Example: Below example illustrate the Semantic UI Icons rotated variation. In the following example, we have rotated the icons in both clockwise and counterclockwise directions using the above classes.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"  
              rel="stylesheet"/> 
        <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
        </script> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
        </script> 
        <style> 
           body { 
             margin-left: 10px; 
             margin-right: 10px; 
           } 
        </style> 
    </head> 
    <body> 
        <div class="ui container"> 
            <center> 
                <h1 class="ui header green">GeeksforGeeks</h1> 
                <strong> Semantic UI Icon Rotated Variation </strong> 
            </center> 
        </div> 
        <div> 
            <center> 
                <div class="ui segment"> 
                    <i class="clockwise rotated  
                              microphone large icon"></i>  
                    <i class="counterclockwise rotated  
                              microphone large icon"></i>                     
                </div> 
            </center> 
        </div> 
    </body> 
</html> 