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

Question

就像标题说的那样，我正在尝试添加带有 fa-fw 类的 padding arround 字体 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>