Estoy trabajando en un proyecto existente en Angular. Agregué un componente hace un mes, que es un formulario con algunas entradas. También tengo algunos íconos de Font Awesome que se muestran muy bien. Código a continuación.
<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>Luego tengo otro componente que consta de algunas tarjetas. Intenté insertar íconos también, pero no aparecen. En cambio, siempre obtengo un pequeño rectángulo, sin importar lo que intente o dónde inserte el ícono.
<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>¿Alguna idea de por qué los íconos funcionarían en un componente Angular y no en el otro?
¿FontAwesomeModule se ha importado correctamente para que pueda ser utilizado por el otro componente?