шрифт потрясающие значки не выравниваются с Bootstrap - PullRequest
Новая
       9

шрифт потрясающие значки не выравниваются с Bootstrap

0 голосов
/ 01 апреля 2020

Я создаю страницу О себе в моем приложении Angular 8. Я использую шрифт awesome и bootstrap 4.

Шрифт awesome неправильно центрируется (выравнивается) по 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 округлено' Аналогично "fas fa-book-open", и глаз не центрирован.

1 Ответ

1 голос
/ 01 апреля 2020

Вы уже установили класс на значке. 

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

Просто установите отрицательное поле для класса значков в вашем css. Значение, вероятно, будет круглым числом, но вам нужно попробовать его или узнать через инспектор, какое поле, отступ или элемент вызывают сдвиг.

Что-то вроде: 

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

Должен сделать трюк

...