布尔玛 |图标

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

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

  

    Bulma Icon
    
  
    
    
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        div {
            text-align: center;
        }
  
        strong {
            margin-right: 5px;
        }
    

  

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

  

输出：

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

  

    Bulma Icon
    
  
    
    
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        div {
            text-align: center;
        }
  
        strong {
            margin-right: 5px;
        }
    

  

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

  

输出：

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

  

    Bulma Icon
    
  
    
    
        div.columns {
            margin-top: 25px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
  
        strong {
            margin-right: 5px;
        }
    

  

    
    
    
  
    
        
            
                
                    
                        Different size Icons
                    
                
  
                
                    
                    
                        
                            
                                
                                
                                
                                
                            
                        
  
                        
                            
                                
                                
                                
                                
                            
  
                            
                                
                                
                                
                                
                            
  
                            
                                
                                
                                
                                
                            
  
                            
                                
                                
                                
                                
                            
  
                            
                                
                                
                                
                                
                            
  
                            
                                
                                
                                
                                
                            
                        
                    NameSmallMediumLargeUsername
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                Password
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                Notification
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                Headphone
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                Home
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                Reply
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                                    
                                        
                                    
                                
                
            
        
    

  

示例 4：旋转的图标

  
    Bulma Icon
    
  
    
    
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
   
      strong{
        margin-right: 5px;
      }
   
    
  
  
  
    
    
    
   
    
      
        
          
            
                Rotated Icons
            
          
   
          
            
            
              
                
                  
                  
                  
                  
                  
                
              
   
              
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
   
                
                  
                  
                  
                  
                  
                
              
            NameNormalLeftRightOppositeUsername
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Password
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Notification
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Headphone
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Home
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Reply
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  Music
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
                    
                      
                    
                  
          
        
      
    
  

输出：

示例 5：堆叠图标

  
    Bulma Icon
    
  
    
    
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
         
      .fa-stack-1x{
        left:6px;
        top:2px;
        bottom:2px;
        right:1px;
      }
    
  
  
  
    
    
    
   
    
      
        
          
            
                Statcked Icons
            
          
   
          
            
              
                
                  
                  
                
              
   
              
                
                  
                  
                
              
   
              
                
                  
                  
                
              
   
              
                
                  
                  
                
              
   
              
                
                  
                  
                
              
            
          
        
      
    
  

输出：