Semantic-UI Icon Disabled State - Coding

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

A Semantic UI Icon is a glyph used to represent something. Icons can be used to display special messages such as like button, danger, etc. The icons are general in meaning and hence widely used. The Semantic UI Icon Disabled state demonstrates that any option or link with which the Icon is linked is disabled. It fades the color of the icon.

Semantic-UI Icon Disabled State classes:

disabled: This class is used to make the icon disabled here.

Syntax:

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

The below example illustrates the Semantic-UI Statistics Variations Floated Variant:

Example: In the following example, we are toggling the class of code icon using the button element using the disabled class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <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> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <h1 style="color: green;"> 
              GeeksforGeeks 
            </h1> 
            <h2>Semantic-UI Icon Disabled State</h2> 
              
            <h4>Code</h4> 
            <i class="code huge circular icon" 
               id="codeIcon"></i> 
              
            <div> 
                <button class="ui button" 
                        onclick="toggleDisable()"> 
                  Enable/Disable Code Icon 
                </button> 
            </div> 
        </center> 
    </div> 
    <script> 
        function toggleDisable(){ 
            $("#codeIcon").toggleClass("disabled"); 
        } 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Icon Disabled State

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Item Variations
Bulma Navbar Burger
Bulma File Modifiers
Bumla Offset
Semantic-UI Icon Link Variation

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9