Reputation: 65

Font Awesome works on one component but not on the other one in Angular

I am working on an existing project in Angular. I have added a component a month ago, which is form with some inputs. I also have some Font Awesome icons which are displaying nicely. Code below.

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

Then I have another component which is consisted of some cards. I tried to insert icons as well, but they don't show. Instead I always get a small rectangle, no matter what I try or where I insert the icon.

<section class="section" *ngFor="let campaign of dummyCampaigns">
<div class="item-container">
  <div class="img-container">
      <img src="https://i.sstatic.net/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>

Any idea why would icons work in one Angular component and not in the other one?

Upvotes: 2