语义 UI 图标颜色变化

Semantic UI 是一个开源开发框架，它提供了预定义的类，使我们的网站看起来漂亮、令人惊叹且响应迅速。它类似于具有预定义类的 Bootstrap。它使用 jQuery 和 CSS 来创建接口。它也可以像 bootstrap 一样通过 CDN 直接使用。

Semantic UI 为用户提供了各种不同的图标，这些图标可用于不同的目的，并具有漂亮的用户界面。在本文中，让我们看看图标颜色的变化。

图标颜色变化允许用户制作语义 UI 图标集的彩色图标。

语义 UI 图标彩色变体类：

• 红色：这将图标颜色设置为红色。
• 橙色：这会将图标颜色设置为橙色。
• 黄色：这会将图标颜色设置为黄色。
• 橄榄色：这会将图标颜色设置为橄榄色。
• 绿色：这将图标颜色设置为绿色。
• 青色：这将图标颜色设置为青色。
• 蓝色：这会将图标颜色设置为蓝色。
• 紫色：这将图标颜色设置为紫色。
• 紫色：这将图标颜色设置为紫色。
• 粉红色：这将图标颜色设置为粉红色。
• brown：这会将图标颜色设置为棕色。
• 灰色：这将图标颜色设置为灰色。
• 黑色：这会将图标颜色设置为黑色。

句法：

   ....

示例 1：以下代码演示了图标下载类以及图标颜色类。

HTML

  

    

  
  

    
        

            

                GeeksforGeeks
            
              
            
                Semantic UI icon coloured variation
            

              
            
            
            
            
            
            
            
            
            
            
            
            
            
        
    

  

输出：

示例 2：以下代码演示了图标 forward 、 play和backward类以及图标颜色类。

HTML

  

    

  
  

    
        

            

                GeeksforGeeks
            
  
            

                    Semantic UI icon coloured variation
            
  
            
            
            
            
            
        
    

  

输出：

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