📜  Semantic-UI 图标集付款和购物

📅  最后修改于: 2022-05-13 01:56:17.771000             🧑  作者: Mango

Semantic-UI 图标集付款和购物

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

Semantic UI 为用户提供了各种不同的图标,这些图标可用于不同的目的,并具有漂亮的用户界面。图标比文字表示为网站增添了更多美感。在本文中,让我们了解一下付款和购物的图标集。
语义 UI 为电子商务或教育技术应用程序的支付和购物提供了一些最常用的图标类,以下是这些类。

语义 UI 图标集付款和购物类:

  • bell:该类用于显示铃铛图标。
  • bell outline:该类用于显示铃铛图标的轮廓。
  • 书签:该类用于显示书签图标
  • 书签大纲:该类用于显示书签图标的轮廓
  • 扩音器:该类用于显示扩音器图标。
  • camera:此类用于显示相机图标。
  • camera retro:此类用于显示复古相机图标。
  • 购物车向下箭头:此类用于显示购物车向下箭头图标。
  • cart plus:这个类用于显示购物车加号图标。
  • 信用卡:该类用于显示信用卡图标。
  • 信用卡轮廓:该类用于显示信用卡图标的轮廓
  • gem:该类用于显示宝石图标
  • gem outline:该类用于显示宝石图标的轮廓。
  • 礼物:这个类用于显示礼物图标。
  • 握手:该类用于显示握手图标。
  • 握手轮廓:该类用于显示握手图标的轮廓。
  • heart:该类用于显示心形图标。
  • heart outline:该类用于显示心形图标的轮廓。
  • key:该类用于显示钥匙图标。
  • 购物袋:该类用于显示购物袋图标。
  • 购物篮:该类用于显示购物篮图标。
  • 购物车:该类用于显示购物车图标。
  • star:该类用于显示星形图标。
  • 星形轮廓:该类用于显示星形图标的轮廓。
  • tag:该类用于显示标签图标。
  • tags:该类用于显示标签图标。
  • thumbs down:这个类用于显示拇指向下图标。
  • thumbs down outline:这个类用于显示拇指向下图标的轮廓。
  • 竖起大拇指:这个类用于显示竖起大拇指图标。
  • 竖起大拇指轮廓:这个类用于显示竖起大拇指图标的轮廓。
  • trophy:该类用于显示奖杯图标。

句法:

示例 1:此代码演示了所有购物和支付图标集类。

HTML


  

    
    
    

  

    
        

GeeksforGeeks

                     Semantic-UI Icon Set Payments and Shopping                  
        
           
               
                
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                   
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
                
                                     
            
        
    
  


HTML


  

    
    
    

  

    
        

Geeksforgeeks

        Semantic UI Icon Set Shopping and Payments         
        
        
                                                               
    
  


输出:

示例 2:此代码演示了购物和支付图标集的使用。

HTML



  

    
    
    

  

    
        

Geeksforgeeks

        Semantic UI Icon Set Shopping and Payments         
        
        
                                                               
    
  

输出:

参考: https://semantic-ui.com/elements/icon.html#payments–shopping