title: Font Awesome works on one component but not on the other one in Angular
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="field"&gt;
          &lt;p class="control has-icons-left has-icons-right"&gt;
            &lt;input type="text"
            class="input"
            id="title"
            required
            placeholder="Title"
            [(ngModel)]="model.title"
            name="title"
            #title="ngModel"&gt;
            &lt;span class="icon is-small is-left"&gt;
              &lt;i class="fa fa-lock"&gt;&lt;/i&gt;
            &lt;/span&gt;
          &lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section" *ngFor="let campaign of dummyCampaigns"&gt;
  &lt;div class="item-container"&gt;
    &lt;div class="img-container"&gt;
        &lt;img src="https://i.stack.imgur.com/WpMdM.png" alt="Location map"&gt;
        &lt;div class="course-details"&gt;
            &lt;p class="date"&gt;
                Starting {{ campaign.startDate }}
            &lt;/p&gt;
            &lt;p class="price"&gt;
                Ending {{ campaign.endDate }}
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="separator"&gt;&lt;/div&gt;
  
    &lt;div class="course-info"&gt;
        &lt;p class="title"&gt;{{ campaign.title }}&lt;/p&gt;
        &lt;p class="sub-title"&gt;{{ campaign.owner}}&lt;/p&gt;
        &lt;div class="title-separator"&gt;&lt;/div&gt;
        &lt;div class="toggle"&gt;
            &lt;i class="fa fa-lock"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;!--&gt;&lt;a href="#" class="more-info"&gt;More info&lt;/a&gt;&lt;--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea why would icons work in one Angular component and not in the other one?</p>