angular-font awesome 图标的背景颜色不缩放

Question

我正在使用 angular-fontawesome 并且想要更改字体的背景颜色 - 真棒 fa-icon

 <fa-icon 
    class="vue-icon"
    [icon]="faVue"
    ></fa-icon>

我使用 class 属性更改了颜色

.vue-icon {
    padding: 10px;
    background: #62dda4;
}

如果我使用 size 属性使图标变大 bg 只填充了一半

 <fa-icon 
    class="vue-icon"
    [icon]="faVue" 
    size="6x"
    ></fa-icon>

是什么导致了这种行为？
到目前为止，我无法从图书馆属性中找到背景

Answer 1

尝试给它一个方块属性来收容它。

.vue-icon {
  display: inline-block; /* add this line*/
  padding: 10px;
  background: #62dda4;
}

background color of angular-fontawesome icons not scalling