Skip Navigation

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

This support ticket is created 6 years, 1 month 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 4 replies, has 2 voices.

Last updated by rusty 6 years, 1 month ago.

Assigned support staff: Luo Yang.

Author
Posts
#450391
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?

#450549

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

#450733

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?

#450802

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.

#452413

That works very well. Thanks Luo!