语义-UI 图标集体育

Semantic UI 是一个 CSS 框架，有助于更快地开发美观且响应迅速的 Web 界面。在本文中，我们将看看 Semantic UI 中包含的 Sports 图标。运动图标集中共有 11 个图标，可用于表示各种游戏和活动。

Semantic-UI 图标集体育课：

• 带球的棒球：这些类用于显示棒球图标。
• 带球的篮球：这些类用于显示篮球图标。
• 带球保龄球：这些类用于显示保龄球图标。
• Football with ball：这些类用于显示橄榄球图标。
• futbol：这些类用于显示足球图标。
• 带轮廓的足球：这些类用于显示带轮廓的足球图标。
• Golf with ball：这些类用于显示高尔夫球图标。
• hockey with puck：这些类用于显示冰球图标。
• 魁地奇：这些类用于显示魁地奇图标。
• 乒乓球桌：这些类用于显示乒乓球图标。
• volleyball with ball：这些类用于显示排球图标。

句法：

示例：下面的示例显示了语义 UI 附带的所有 11 个运动图标的使用。

HTML

  

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

  

  
    
      GeeksforGeeks
      Semantic UI - Icon Set Sports
    
  
    
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
    
  

  

输出：

语义 UI - 图标集体育

示例 2 ：下面的示例显示了 Semantic UI 中图标集运动图标的变化。

HTML

  

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

  

  
    
        GeeksforGeeks
        Semantic UI - Icon Set Sports
    
  
    
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
  
      
          
      
    
  

  

输出：

语义 UI – 图标集运动变化

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