Adding padding to fa-fw Font Awesome icon

like title says I'm trying to add padding arround font Awsome icon with class fa-fw -comming here from android and java so am a bit confused and trying to get a grasp of css at the moent but that part I just can't figure out:S here is the code:

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

and css:

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

and the result I'm getting:

edit: resst of the code :

<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>