Semantic-UI 图标倒置变化

Semantic UI开源框架提供图标或字形，用于显示与某些元素相关的图片，使用 CSS 和 jQuery，用于创建出色的用户界面。它是一个用于创建漂亮和响应式布局的开发框架。

语义 UI 图标是一个字形，用于显示其他内容来代替文本以节省空间和时间。图标用于帮助用户浏览并在所有语言中具有相同的含义，因此许多项目不需要用不同的语言编写。

语义 UI 图标反转变体反转图标的颜色以进行对比。这意味着背景颜色为黑色，并且更改了图标颜色以使其可见。

Semantic UI Icons Inverted Variation 类：

• 倒置：将此类添加到图标元素时，颜色会更改以增加对比度。

句法：

    ...

示例：下面的示例说明了语义 UI 图标的反转变体。在这个例子中，我们反转了 div 容器的颜色以及反转了地球图标的颜色，因为第一个原来的颜色是黑色的，但是因为它被反转了，所以它显示为白色。

HTML

  

    
    
    
    
    

  

    
        
             
                GeeksforGeeks 
            
              
            Semantic UI Icons Inverted Variation
        
    
  
    
        
            
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
    
    
        function toggleFloat() {
            $("button").toggleClass("left floated")
                .toggleClass("right floated");
        }
    

  

输出：

参考： https://semantic-ui.com/elements/icon.html#inverted