Font Awesome 适用于一个组件，但不适用于 Angular 中的另一个组件答案

【问题标题】：Font Awesome works on one component but not on the other one in AngularFont Awesome 适用于一个组件，但不适用于 Angular 中的另一个组件
【发布时间】：2022-01-21 03:03:17
【问题描述】：

我正在使用 Angular 开发一个现有项目。一个月前我添加了一个组件，它是带有一些输入的表单。我也有一些显示很好的 Font Awesome 图标。代码如下。

<div class="field">
        <p class="control has-icons-left has-icons-right">
          <input type="text"
          class="input"
          id="title"
          required
          placeholder="Title"
          [(ngModel)]="model.title"
          name="title"
          #title="ngModel">
          <span class="icon is-small is-left">
            <i class="fa fa-lock"></i>
          </span>
        </p>
  </div>

然后我有另一个由一些卡片组成的组件。我也尝试插入图标，但它们没有显示。相反，无论我尝试什么或在哪里插入图标，我总是得到一个小矩形。

<section class="section" *ngFor="let campaign of dummyCampaigns">
<div class="item-container">
  <div class="img-container">
      <img src="https://i.stack.imgur.com/WpMdM.png" alt="Location map">
      <div class="course-details">
          <p class="date">
              Starting {{ campaign.startDate }}
          </p>
          <p class="price">
              Ending {{ campaign.endDate }}
          </p>
      </div>
  </div>
  <div class="separator"></div>

  <div class="course-info">
      <p class="title">{{ campaign.title }}</p>
      <p class="sub-title">{{ campaign.owner}}</p>
      <div class="title-separator"></div>
      <div class="toggle">
          <i class="fa fa-lock"></i>
      </div>
      <!--><a href="#" class="more-info">More info</a><-->
  </div>
</div>
</section>

知道为什么图标可以在一个 Angular 组件中工作，而不能在另一个组件中工作吗？

【问题讨论】：

标签： html angular font-awesome

【解决方案1】：

FontAwesomeModule 是否正确导入以便其他组件可以使用？

【讨论】：

我不确定，我该如何检查？对于第一个组件（它在其中工作），我从未进行任何特殊导入，以及第二个组件。由于它是现有项目，因此很久以前就已经对导入进行了排序。
只要在你的项目中搜索FontAwesomeModule，看看它是从哪里导入的。如果它没有在 app.module.ts 中导入，你可以简单地在那里导入它，每个组件都应该能够使用它。
我去检查它是如何实际导入的，发现导入在 angular.json 中。它是以“样式”而不是“脚本”导入的，所以我只是添加了“脚本”的路径，就像这里stackoverflow.com/a/58801612/14089282

【解决方案2】：

“样式”中存在导入路径，但“脚本”中缺少。在我添加了“脚本”的路径后，它就可以工作了。解释here

【讨论】：