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.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>Any idea why would icons work in one Angular component and not in the other one?