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

Question

就像标题说的那样，我正在尝试添加带有 fa-fw 类的填充字体 Awsome 图标 - 从 android 和 java 来到这里，所以我有点困惑，现在试图掌握 css 但那部分我就是做不到弄清楚：S 这里是代码：

<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

你的例子工作正常，这里你有黄色背景的10px填充。

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="mainpage"> main-page works! <i class="fa fa-credit-card fa-fw" aria-hidden="true"></i> </div>