Bulma 字体真棒容器

在本文中，我们将了解 Bulma Font Awesome 容器 mixin。 Font Awesome 容器 mixin 创建了一个方形 inline-block 元素，用于包含一个图标或任何类型或类别的图标组。 mixin 使用两个参数向容器中添加一些样式。第一个$size参数定义图标的字体大小，而第二个即$dimensions参数定义正在创建的容器的尺寸。

Bulma Font Awesome 容器类：对于创建 mixin，Bulma 没有提供特定的类，相反我们可以创建我们的类，然后在 SASS mixin 的帮助下为元素设置样式。

句法：

    


.bulma-fa-mixin {
    @include fa(2rem, 3rem);
    background-color: black;
}

示例 1：下面的示例在单个图标中展示了 Bulma Font Awesome Container。

CSS

@mixin fa($size, $dimensions) {
    display: inline-block;
    font-size: $size;
    text-align: center;
    vertical-align: top;
    width: $dimensions;
    height: $dimensions;
}
  
.bulma-fa-mixin {
    @include fa(2rem, 4rem);
    background-color: aqua;
}

输出：

Bulma 字体真棒容器

示例 2：下面的示例说明了多个 Font Awesome Containers。

HTML

  

    
    
    
    
    

    

  

    
        
          GeekforGeeks
        
        
          Bulma Font Awesome Container
        
  
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
  
    

CSS

@mixin fa($size, $dimensions) {
    display: inline-block;
    font-size: $size;
    color: white;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    width: $dimensions;
}
  
.bulma-fa-mixin {
    @include fa(2rem, 3rem);
    background-color: black;
}

输出：

参考： https://bulma.io/documentation/utilities/mixins/#font-awesome-container