Semantic-UI Icon Flipped 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 Flipped variation flips the icon vertically or horizontally. We can flip the icon with the flipped class variation.

Semantic UI Icon Flipped variation classes:

horizontally: This flips the icon horizontally, which means left to right.
vertically: This flips the icon vertically, which means top to bottom.

Syntax: Add the horizontally or vertically flipped class to the icon for flipping in the desired direction as follows.

<i class="horizontally flipped icon">
    ...
</i>

Example: The below example illustrates the Semantic UI Icon flipped variation. In the following example, we have flipped the icons both horizontally and vertically.

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 flipped variation </strong> 
         
                <div class="ui segment">                     
                    <i class="cloud horizontally  
                              flipped huge icon"></i> 
                    Horizontally Flipped 
                    <i class="microphone vertically  
                              flipped huge icon"></i> 
                    Vertically Flipped                
                </div> 
            </center> 
        </div> 
    </body> 
</html> 