字体很棒的图标与 Bootstrap 不对齐

Question

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

真棒字体未与 bootstrap 正确居中（对齐）。如果有人可以指导，这是我的代码！

<!--==========================
  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-tachometer-alt' 不在 'bg-white rounded' 的中心同样"fas fa-book-open"，眼睛不居中

Answer 1

您已经在图标上设置了 class。

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

只需为 css 中的图标 class 设置负边距。该值可能是一个整数，但您需要尝试一下或通过检查器找到导致偏移的边距、填充或元素。

类似于：

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

应该可以解决问题

字体很棒的图标与 Bootstrap 不对齐

font awesome icons not aligning with Bootstrap

font-awesome

bootstrap-4

angular