Icon before add to cart text on add to cart buttons

Hello, I want to add an icon to my add to cart buttons, before the “add to cart text”. Can you help me do this? I saw an old post that suggested this code, but it does not work for me:

.single-product-content .entry-summary .single_add_to_cart_button:before {
content: “\f107”;
font-family: woodmart-font;
display: inline-block;
font-size: 20px;
font-weight: 400;
vertical-align: middle;
margin-right: 12px;
}

Looking forward to hearing from you. Thank you so much.

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS > Global Custom CSS area:

body .single_add_to_cart_button:before {
       content: "\f126";
       font-family: woodmart-font;
	position: absolute;
	inset-inline-start: 50px;
	opacity: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: end;
       font-size: 25px;
}

Best Regards,

Hello, thanks for getting back to me so quickly. It works, but I want the add to cart icon to be right next to the text (like seen in the screenshot provided)

Attachments:

You must be logged in to view attached files.

Hello,

Please apply the previous CSS code in the Mobile CSS section, and add the following CSS code under

Theme Settings > Custom CSS > Custom CSS for Desktop:

body .single_add_to_cart_button:before {
       content: "\f126";
       font-family: woodmart-font;
	position: absolute;
	inset-inline-start: 120px;
	opacity: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: end;
       font-size: 25px;
}

Best Regards,

Does not work I am afraid. See screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Please try adjusting the value in the code to change the icon’s position.

For example: inset-inline-start: 120px;

If the issue remains, share the wp login details so it can further check on your site and give you a possible solution.

Best Regards,

Put login details in the moderators tab. Thank you so much!

Hello,

Sorry to say your login details are not working. So, try to add the following custom css code in Theme Settings > Custom CSS > Global Custom CSS area:

body .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* space between icon and text */
}

body .single_add_to_cart_button::before {
    content: "\f126";
    font-family: woodmart-font;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    position: static;
    opacity: 1;
}

Best Regards,

This code worked. Thank you so much for amazing help.

Hello,

You’re very welcome! If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts