0

So I've been experiencing this problem since I launched this site (https://shop.cafedumonde.com/). Whenever I click on the Add to Cart buttons, the buttons expand and an right arrow icon from Font Awesome should come out. It never does and I've tried various methods to get it to work but to no avail. Here's the code I'm using. First the HTML:

<div class="wp-block-button wc-block-grid__product-add-to-cart">
    <a href="?add-to-cart=46198" aria-label="Add &ldquo;Beignet Mix&rdquo; to your cart" data-quantity="1" data-product_id="46198" data-product_sku="R2A" rel="nofollow" class="wp-block-button__link add_to_cart_button ajax_add_to_cart">Add to cart</a>
 </div>

CSS:

.wc-block-grid__product-add-to-cart a.added::after {
    color: #fff;
    content: '\f0a9';
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
Adam Bell
  • 1,049
  • 1
  • 16
  • 50

1 Answers1

1

On the pages where you can add items to your cart, I can't seem to find this class anywhere: wc-block-grid__product-add-to-cart - this is likely the cause of your problem (unless I'm not looking at the right page, in which case could you tell me what page I should be looking at?)

EDIT: The issue is that Font Awesome is using icons as a font. When you load a font you need to explicitly load any weights you are using; in your case the problem that is breaking it is the font-weight: normal; property - remove it and your icon should work :)

KLP
  • 433
  • 2
  • 5
  • The homepsge. Scroll down to the "New Orleans’ Finest Treats' area. Click any Add to Cart button and the right arrow icon should appear but it's broken, – Adam Bell Nov 25 '19 at 04:14
  • Ah, ok - I found the issue. I will edit my answer and add it. – KLP Nov 25 '19 at 04:23
  • Unfortunately, removing font-weight: normal; didn't change anything. Still not showing up. – Adam Bell Nov 25 '19 at 19:16
  • It looks like you have (inadvertently) changed a bunch of your styles since yesterday. The best way to get it to work would just be the class names as expected and not a pseudoelement: – KLP Nov 26 '19 at 00:17
  • Found it thanks to Temani locating that other post and adding the font-weight: 900; Made all the difference in the world. – Adam Bell Nov 27 '19 at 04:36