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

2023年12月20日 753次阅读

喜欢标题说我正在尝试添加填充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;
}

以及我得到的结果：
《html – 为fa-fw Font Awesome图标添加填充》

编辑：
代码：

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

最佳答案 你的例子很好,这里你有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>
点赞