Fontawesome Icon not Showing After Adding a New Class

[liagapi555]

I have downloaded fontawesome-free-6.2.1-web and I’m trying to use the shopping cart icon. The shopping cart class name is “fa-cart-shopping” and if I use it by itself it does not work. It shows up when I added the class “fa” in front of the class “fa fa-cart-shopping”. I tried to add a new class to my “i” element so that I can style that class to position the shopping cart but it causes the icon to show up as a square instead of a shopping cart. The following shows the classes being applied on my “i” element.

<i class="fa fa-cart-shopping mycart">

The class “mycart” is the class I added to try to position the shopping cart icon but it causes the cart to show as a square. Please help suggest a solution.

[DaveMaxwell]

So what are you applying with the mycart class selector?

[SamA74]

“Inspect” is your go-to tool in the browser. It should show you what styles are appled to an element, via what selector, in whch sheet, and what styles are being overriden.

[liagapi555]

The following is a snippet of my styles and markups

<styles>
#product1 .product .mycart{
    width:40px;
    height:40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: white;
    font-weight: 500;
    color:green;
    border:1px solid white;
    position: absolute;
    bottom:20px;
    right:10px;
  }

</styles>
-----------------------------------------------------
 <section id="product1">
    <h2>Featured Products</h2>
    <p>Designer Collection</p>
    <div class="product-container">     
      <div class="product">
        <img src="product1" alt="Product">  
        <div class="desc">              
          <span>Shoes</span>
          <h5>T-Shirts</h5>          
          <h4>$78</h4>         
        </div>
        <a href="#"><i class="fa fa-cart-shopping mycart"></i></a>
      </div>
    </div>
  </section>

I did not see any conflicts when I inspected the code. I’ll have to inspect it again to see if I missed any thing the first time around.

[DaveMaxwell]

My guess would be the font-weight.

Another thing I noticed looking at it again, does the fa class even work? I thought they deprecated that back in v5. Shouldn’t that be fa-solid or something similar?

[PaulOB]

@DaveMaxwell

My guess would be the font-weight.

Yes its the font-weight that changed the icon but also the absolute position has no context so the icon may be right in the bottom right of the viewport unless there is a position:relative on a parent close by.

This is what your code produces with the font-weight removed.

[liagapi555]

Hi guys,
Thanks for your responses. Yes, There is a position relative on the parent element of the anchor tag which holds the shopping cart icon and the parent element is the DIV element with the class “product”. Also “fa” and “fa-solid” classes do work. It turns out the font-weight is the cause of the issue, the shopping cart icon shows up when font-weight is set greater than 500. It would never have crossed my mind to set the font-weight higher than 500 had it not been for your help.