📜  布尔玛 |图标

📅  最后修改于: 2021-10-29 06:24:53             🧑  作者: Mango

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
图标是一种为图标字体预留空间的方形容器。 Bulma 兼容所有图标字体库:Font Awesome、Material Design Icons、Ionicons 等。

示例 1:此示例使用 Bulma 创建普通图标。



  

    Bulma Icon
    
  
    
    

  

    
    
  
    
        
            
                
                    

                        Plain Icons                     

                
                   
                    
                        Username:                                                                                                    
                       
                        Password:                                                                                                    
                       
                        Notification:                                                                                                    
                       
                        Headphone:                                                                                                    
                       
                        Home:                                                                                                    
                       
                        Reply:                                                                                                    
                       
                        Music:                                                                                                    
                
            
        
    
  

输出:

示例 2:此示例使用 Bulma 创建一些彩色图标。



  

    Bulma Icon
    
  
    
    

  

    
    
  
    
        
            
                
                    

                        Colorful Icons                     

                
                   
                    
                        Username:                                                                                                    
                       
                        Password:                                                                                                    
                       
                        Notification:                                                                                                    
                       
                        Headphone:                                                                                                    
                       
                        Home:                                                                                                    
                       
                        Reply:                                                                                                    
                       
                        Music:                                                                                                    
                
            
        
    
  

输出:

示例 3:此示例创建不同大小的图标。



  

    Bulma Icon
    
  
    
    

  

    
    
  
    
        
            
                
                    

                        Different size Icons                     

                
                   
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
NameSmallMediumLarge
Username                                                                                                                                                                                                                                                                                                                                                                                                                                                            
Password                                                                                                                                                                                                                                                                                                                                                                                                                                                            
Notification                                                                                                                                                                                                                                                                                                                                                                                                                                                            
Headphone                                                                                                                                                                                                                                                                                                                                                                                                                                                            
Home                                                                                                                                                                                                                                                                                                                                                                                                                                                            
Reply                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                
            
        
    
  

示例 4:旋转的图标



  
    Bulma Icon
    
  
    
    
  
  
  
    
    
   
    
      
        
          
            

                Rotated Icons             

          
              
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
NameNormalLeftRightOpposite
Username                                                                                                                                                                                                                                                                                                                                                
Password                                                                                                                                                                                                                                                                                                                                                
Notification                                                                                                                                                                                                                                                                                                                                                
Headphone                                                                                                                                                                                                                                                                                                                                                
Home                                                                                                                                                                                                                                                                                                                                                
Reply                                                                                                                                                                                                                                                                                                                                                
Music                                                                                                                                                                                                                                                                                                                                                
          
        
      
    
  

输出:

示例 5:堆叠图标



  
    Bulma Icon
    
  
    
    
  
  
  
    
    
   
    
      
        
          
            

                Statcked Icons             

          
              
            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
          
        
      
    
  

输出: