Font-Awesome icons are not appearing

[DaleMFrancis]

(Angular) My font-awesome icons are not appearing. Bummer. I’m pointing to the 5.15.1 CDN.

Here are some code snippets:

In the component.ts:

angleLeft = faAngleLeft; angleRight = faAngleRight;

In the component.html: <fa-icon [icon] = angleLeft>

 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <i class="fas fa-icon"></i>

(Also, although probably not related to the problem, In the ngModule I reference CUSTOM_ELEMENTS_SCHEMA.)

These should be all of the elements relevant to this issue.

Can you help me to resolve this? I’m having a very hard time figuring it out.

Thank you.

[DaleMFrancis]

It occurs to me that my problem with font-awesome could possibly be related to my carousel. So here is the html carousel code:

               <!-- carousel here! -->   
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                     <!-- Indicators -->

                     <ol class="carousel-indicators">
                       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                       <li data-target="#myCarousel" data-slide-to="1"></li>
                       <li data-target="#myCarousel" data-slide-to="2"></li>
                     </ol>

                     <!-- Wrapper for slides -->
                     <div class="carousel-inner">
                       <div class="item active">
                        <!-- <img [src]="#/assets/{{images[0]}}" alt="Cats Pic"> -->  
                        <!-- <img class="pics" src="#/assets/Monaco-and-Spirit.jpeg"> -->
                        <img class="pics" src="assets/Monaco-and-Spirit.jpeg"> 
                        <img class="pics" src="assets/Monaco-and-Spirit2.jpeg"> 
                        <img class="pics" src="assets/Monaco-and-Spirit3.jpeg"> 
                     </div>

                     <!-- Left and right controls -->
                     <!-- use fontawsome -->

                     <!-- <fa-icon [icon]="filmIcon"></fa-icon> -->
                     <fa-icon [icon] = angleLeft></fa-icon> 
                     <!-- <i class="fa fa-icon"></i> -->

                     <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                       <!-- <span class="angles angleLeft"></span> -->
                       <i class="fas fa-icon"></i>
                       <span class="sr-only">Previous</span>
                     </a>
                     <a class="right carousel-control" href="#myCarousel" data-slide="next">
                       <span class="angles angleRight" alt="" width="40" height="40"></span>
                       <span class="sr-only">Next</span>
                     </a>
                </div>

Thank you. The two posts should be considered together as one.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Could you please fill out our bug report template?

Please provide all the information you can, including angular version and how you are using our official angular component

Ref: https://fontawesome.com/how-to-use/on-the-web/using-with/angular