[Resolved] Using Font Awesome Icons in WooCommerce Add to Cart Button

[Author]

Posts

[rusty]

I am trying to: Add a Font Awesome cart icon to the "Add to Cart" button in my view's content template.

I expected to see: The cart icon

Instead, I got:The Font Awesome code gets output as text instead of the icon.

I am using Font Awesome elsewhere on the site and it's working fine. When I try to put

<i class="fa fa-cart-plus" aria-hidden="true"></i>

in the button text, it just outputs the code as text instead of the icon. Can icons be added to WooCommerce add to cart button?

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Dear rusty,

It is the HTML "i" tag does not work as expected inside the HTML "a" tag, so I suggest you use some JS codes to add CSS class "fa fa-cart-plus" into the "Add to Cart" button, for example:

jQuery('a.add_to_cart_button').addClass('fa fa-cart-plus');
jQuery('a.add_to_cart_button').attr('aria-hidden', 'true');<

More help:
hidden link

[rusty]

Thanks Luo. That indeed does add the icon, but it also resets the typestyle of the entire button which won't work. I think that at this time it's just not possible, unless you have another suggestion?

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Please modify the JS codes as below, and test again:

jQuery('a.add_to_cart_button').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');

More help:
hidden link
.prepend()
Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

[rusty]

That works very well. Thanks Luo!