Home › Toolset Professional Support › [Resolved] Using Font Awesome Icons in WooCommerce Add to Cart Button
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.
Tagged: Content Templates, Views plugin
This topic contains 4 replies, has 2 voices.
Last updated by rusty 5 years, 8 months ago.
Assigned support staff: Luo Yang.
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?
English (English )
Chinese (Simplified) (简体中文 )
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:
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?
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> ');
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!
Known issues and solutions
Frequently asked support questions
Support tickets archive
Get help from experienced contractors
Meet Toolset support team
Toolset Customer Support Policy
Need to tell us something about the quality of support
How to remove personal information from your database for support