添加填充到fa-fw Font Awesome图标

Question

像标题一样说我试图在这里添加填充arround字体Awsome图标与类fa-fw -comming来自android和java所以我有点困惑并试图掌握css在moent但那部分我只是无法弄清楚：这是代码：

<div class="mainpage">
  main-page works!
 <i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>
</div>

和css：

.fa-fw {
  background: yellow;
  padding: 10px;
}

我得到的结果：

编辑： 代码：

<div class="main-wrapper" style="background: green">
  <app-top-bar (onToggleEmiter)="isMenuClosed =$event"></app-top-bar>
  <div class="wrapper-sub" [ngClass]="{extendedBar:sidebarIsExpended === true}">
    <div class="row container-fluid">
      <div *ngIf="(isMenuClosed)===true; else noth" class="weee">
        <app-side-bar class="hidde"></app-side-bar>
      </div>
      <ng-template #noth>
        <app-side-bar class="nothidde"></app-side-bar>
      </ng-template>
      <app-main-page></app-main-page>
    </div>
  </div>
</div>

Answer 1

您的示例工作正常，此处您有// Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode if (isIE = false) { var node = document.getElementsById('timer')[i]; node.parentNode.removeChild(node); } 填充黄色背景。

10px

.fa-fw{
  background: yellow;
  padding: 10px;
}