Angular 字体图标不与引导对齐

我正在我的Angular 8应用程序中设计一个关于页面。我正在使用字体真棒和引导4

字体未与引导正确居中（对齐）。这是我的密码，如果有人能帮我指引的话

<!--==========================
  About Us Section
============================-->

<section id="about">
  <div class="container">
    <header class="section-header">

      <h3 *ngIf="!showSpanish">About Us</h3>
      <h3 *ngIf="showSpanish">Sobre nosotros</h3>
      <p *ngIf="!showSpanish">
        Here goes Description!
      </p>
      <p *ngIf="showSpanish">
        ¡Aquí va la descripción de!
      </p>
      <div class="input-group">
        <button class="btn btn-primary p-1 mr-1" (click)="useLanguage('en')" type="button">English</button>
        <button class="btn btn-success  p-1 ml-1" (click)="useLanguage('es')" type="button">Espaniol</button>
      </div>

    </header>
    <div class="row about-cols">
      <div class="col-md-4 mb-5 bg-white rounded">
        <div class="about-col">
          <div class="img">
            <img src="http://.../img/SV01.jpg" alt="" class="img-fluid">

            <div class="icon"><i class="fas fa-tachometer-alt"></i></div>

          </div>
          <h2 class="title" *ngIf="!showSpanish">Background</h2>
          <h2 class="title" *ngIf="showSpanish">Antecedentes</h2>
          <p *ngIf="!showSpanish">
            What is a Plan?
            Some text
          </p>
          <p *ngIf="showSpanish">
            What is a Plan?
            Some text in spanish
          </p>
        </div>
      </div>
      <div class="col-md-4 shadow-lg p-3 mb-5 bg-white rounded" data-wow-delay="0.1s">
        <div class="about-col">
          <div class="img">
            <img src="http://.../Content/img/SV02.png" alt="" class="img-fluid">

            <div class="icon"><i class="fas fa-book-open"></i></div>
          </div>
          <h2 class="title" *ngIf="!showSpanish">What We Do?</h2>
          <h2 class="title" *ngIf="showSpanish">Que hacemos</h2>

          <p *ngIf="!showSpanish">
            Some text
          </p>
          <p *ngIf="showSpanish">
            some text
          </p>
        </div>
      </div>
      <div class="col-md-4 shadow-lg p-3 mb-5 bg-white rounded" data-wow-delay="0.2s">
        <div class="about-col">
          <div class="img">
            <img src="http://.../Content/img/SV03.jpg" alt="" class="img-fluid">
            <div class="icon"><i class="fas fa-eye"></i></div>
          </div>
          <h2 class="title" *ngIf="!showSpanish">Our Mission and Vision</h2>
          <h2 class="title" *ngIf="showSpanish">Nuestra misión y visión</h2>
          <p *ngIf="!showSpanish">
            some text
          </p>
          <p *ngIf="showSpanish">
            Some text
          </p>
        </div>
      </div>
    </div>
  </div>
</section><!-- #about -->

关于我们
索布雷诺索特罗斯酒店

下面是描述！


“请描述一下！

英语
西班牙人
背景
先例

什么是计划？
一些文本


什么是计划？
一些西班牙文文本

我们做什么？
克哈切莫斯酒店

一些文本


一些文本

我们的使命和愿景
米西翁和西翁之家酒店

一些文本


一些文本

例如，“fas fa转速表高度”未居中于“bg白色圆形”中

---

类似地，“fas fa book open”和“eye”没有居中。

您已经在图标上设置了一个类

<div class="icon"><i class="fas fa-eye"></i></div>

---

应该做到这一点

。icon{padding left:4px！important；padding right:4px！important；}使用开发工具检查了DOM，它成功了

.icon {
    margin-left: -10px;
}