Font Awesome: Why isn’t my arrow icon loading on an :after instance? [duplicate]

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;
}

1 Answer

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 🙂

Archive from: https://stackoverflow.com/questions/59024993/font-awesome-why-isnt-my-arrow-icon-loading-on-an-after-instance

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *