Open In App

Semantic-UI Icon Inverted Variation

Last Updated : 14 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 Icons inverted variation inverts the colour of the icons for contrast. This means that the background colour is black and the icon colours are changed to make them visible.

Semantic UI Icons Inverted Variation class:

  • inverted: On adding this class to the icon element, the colour gets changed to increase the contrast.

Syntax:

<i class="inverted icon">
    ...
</i>

Example: The below example illustrates the Semantic UI Icons inverted variation. In this example, we have inverted the div container colour as well as inverted the colour of the globe icons as the first one’s original is black but as it is inverted, it is showing white.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
        rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="margin-left:10px;margin-right:10px">
    <div class="ui container">
        <center>
            <h1 class="ui header green"
                GeeksforGeeks 
            </h1>
              
            <strong>Semantic UI Icons Inverted Variation</strong>
        </center>
    </div>
  
    <div>
        <center>
            <div class="ui inverted segment">
                <i class="inverted globe large icon"></i>
                <i class="inverted red globe large icon"></i>
                <i class="inverted orange globe large icon"></i>
                <i class="inverted yellow globe large icon"></i>
                <i class="inverted olive globe large icon"></i>
                <i class="inverted green globe large icon"></i>
                <i class="inverted teal globe large icon"></i>
                <i class="inverted blue globe large icon"></i>
                <i class="inverted violet globe large icon"></i>
                <i class="inverted purple globe large icon"></i>
                <i class="inverted pink globe large icon"></i>
                <i class="inverted brown globe large icon"></i>
                <i class="inverted grey globe large icon"></i>
            </div>
        </center>
    </div>
    <script>
        function toggleFloat() {
            $("button").toggleClass("left floated")
                .toggleClass("right floated");
        }
    </script>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/icon.html#inverted



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads