Problems with Font Awesome: WDB Bootcamp 2023 -- Day 15

The Bootstrap challenge required us to use Font Awesome and Bootstrap's containers to add icons and make the layout more responsive.  Incorporating Bootstrap's containers was easy. The problems came with Font Awesome...

Before I begin here is what I was able to do with Font Awesome and containers:

Here is the code for this section:

  <section id="features">

    <br>

    <br>

    <div class = "row">

        <div class ="col-lg-4">

          <i class="fa-sharp fa-solid fa-circle-check fa-2xl awesome" ></i>

          <h3>Easy to use.</h3>

          <p>So easy to use, even your dog could do it.</p>

        </div>

     

        <div class ="col-lg-4">

          <i class="fa-solid fa-bullseye fa-2xl awesome"></i>

          <h3>Elite Clientele</h3>

          <p>We have all the dogs, the greatest dogs.</p>

        </div>

        <div class ="col-lg-4">

          <i class="fa-solid fa-heart fa-2xl awesome"></i>

          <h3>Guaranteed to work.</h3>

          <p>Find the love of your dog's life or your money back.</p>

        </div>

    </div>

The problem that I had with Font Awesome was that the CDN used in Angela's videos is out of date. The CDN on Font Awesome's website is different.  Font Awesome requires registration for a CDN kit.  However, this was not explained by Angela in her video.  In reality, her videos have not been updated.

Luckily, someone in the Udemy course posted the correct code for using Font Awesome. 

Font Awesome code:  <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>

Apple icon: <i class="fa-brands fa-apple"></i>

Google play icon: <i class="fa-brands fa-google-play"></i>

The next problem I had was whether to style the icons using HTML or CSS. For this challenge, I sued both when needed, but I will redo some of the code when I see Angela's solutions.

Changing the icons' color:

/* features */

.awesome{

    color: #ff4c68;

}

Changing the size of the icons:

<i class="fa-sharp fa-solid fa-circle-check fa-2xl awesome" ></i>

<i class="fa-solid fa-bullseye fa-2xl awesome"></i>

 <i class="fa-solid fa-heart fa-2xl awesome"></i>