语义 UI 图标集形状

Semantic UI 是一个用 less 和 jQuery 构建的 CSS 框架。它带有预构建的元素和模块以及对主题的强大支持，使开发人员更容易开发出色的网站。在本文中，我们将学习用于表示各种形状的语义 UI 图标集形状。形状图标集中共有 22 个图标。

语义 UI 图标集形状类：

• 书签：该类用于显示书签图标。
• 书签大纲：这些类用于显示带轮廓的书签图标。
• calendar ：此类用于显示日历图标。
• 日历大纲：这些类用于显示大纲日历图标。
• 证书：该类用于显示证书图标。
• circle：该类用于将圆形显示为图标。
• 圆形轮廓：这些类用于将轮廓圆形显示为图标。
• cloud：该类用于显示云图标。
• comment：该类用于显示评论图标。
• 评论大纲：这些类用于显示大纲评论图标。
• file：该类用于显示文件图标。
• 文件大纲：这些类用于显示大纲文件图标。
• 文件夹：该类用于显示文件夹图标。
• 文件夹轮廓：这些类用于显示轮廓文件夹图标。
• heart：该类用于显示心形图标。
• 心形轮廓：这些类用于显示轮廓心形图标。
• 地图标记：这些类用于显示地图标记图标。
• play：该类用于显示播放图标。
• square：该类用于显示方形图标。
• 方形轮廓：这些类用于显示轮廓方形图标。
• star：该类用于显示星形图标。
• 星形轮廓：这些类用于显示轮廓星形图标。

句法：

示例 1：下面的示例说明了上面列出的所有 22 个图标的使用。

HTML

  

    Semantic-UI Icon Set Shapes
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Shapes
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI – 图标集形状

示例 2：下面的示例显示了使用不同颜色的 Shapes Set 图标。

HTML

  

    Semantic-UI Icon Set Shapes
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Shapes
                with Colors Variation
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI – 具有颜色变化的图标集形状

示例 3：下面的示例显示了使用具有大小变化的 Shapes 集图标。

HTML

  

    Semantic-UI Icon Set Shapes
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Shapes
                with Sizes Variation
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI – 具有大小变化的图标集形状

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