语义 UI 图标集用户和人员

Semantic UI 是一个组件丰富的 UI 框架，用于设计和主题化网站。在本文中，我们将看到 Semantic UI 附带的用户和人物图标。用户和人物图标集中共有 31 个图标。

Semantic-UI 图标集用户和人员类：

• address with book：这些类一起用于显示地址簿图标。
• 地址 有书 和outline ：这些类一起用于显示轮廓的地址簿图标。
• address with card ：这些类一起用于显示地址卡图标。
• 带卡和轮廓的地址：这些类一起用于显示带轮廓的地址卡图标。
• 床：这个类用于显示床图标。
• 盲人：这个类用于显示一个显示盲人行走的图标。
• child：该类用于显示子图标。
• 女性：该类用于显示代表女性性别的图标。
• frown：这个类用于显示一个显示皱眉脸的图标。
• 带轮廓的皱眉：这些类用于显示一个图标，显示轮廓皱眉的脸。
• ID with badge：这些类一起用于显示 id 徽章图标。
• id with badge and outline：这些类一起用于显示带轮廓的 id 徽章图标。
• id with card：这些类一起用于显示身份证图标。
• id with card and outline：这些类一起用于显示带轮廓的身份证图标。
• male：该类用于显示代表男性性别的图标。
• meh：该类用于显示具有 meh 表情的面部。
• meh with outline：这些类用于显示具有 meh 表情的轮廓面。
• power with off：这些类一起用于显示电源关闭图标。
• 微笑：该类用于显示笑脸图标。
• 带轮廓的微笑：这些类一起用于显示带轮廓的笑脸图标。
• street with view：这些类一起用于显示街景图标。
• user：这个类用于显示一个简单的用户图标。
• 带有轮廓的用户：这些类一起用于显示轮廓的用户图标。
• 带圆圈的用户：这些类一起用于显示圆形用户图标。
• 带有圆形和轮廓的用户：这些类一起用于显示轮廓圆形用户图标。
• 带有md的用户：这些类用于显示与医疗相关的用户图标。
• 带加号的用户：这些类一起使用以显示带有加号图标的用户。
• user with secret：这些类一起用于显示一个秘密用户图标。
• 带时间的用户：这些类一起使用以显示带有时间图标的用户。
• users：此类用于显示代表一组用户的图标。
• 轮椅：此类用于显示代表坐在轮椅上的人的图标。

句法：

示例：下面的示例显示了上面列出的所有 31 个图标的使用。

HTML

 

   Semantic UI - Icon Set Users & People
   
 
   

 
   
   
 
   
   .ui.container {
      text-align: center;
   }
 
   h3 {
      margin-top: 0px;
   }
 
   .ui.grid {
      margin-top: 30px !important;
   }
   

 

  
    
      GeeksforGeeks
      Semantic UI - Icon Set Users & People
    
 
    
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
 
        
           
        
    
  

 

输出：

语义 UI – 图标集用户和人员

Example2:下面的例子展示了如何使用不同颜色和大小的用户和人物图标。

HTML

 

    Semantic UI - Icon Set Users & People
    
 
    
    
 
    
    
 
    
      .ui.container {
         text-align: center;
      }
 
      h3 {
         margin-top: 0px;
      }
 
      .ui.grid {
         margin-top: 30px !important;
      }
    

 

  
    
      GeeksforGeeks
      Semantic UI - Icon Set Users & People
    
 
    
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
         
      
 
      
          
      
    
  

 

输出：

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