Skip Navigation

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

This support ticket is created 5 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by rusty 5 years, 8 months ago.

Assigned support staff: Luo Yang.

Screen Shot 2016-10-25 at 7.11.03 PM.png
Screen Shot 2016-10-25 at 7.09.48 PM.png

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

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


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

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
Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.


That works very well. Thanks Luo!