Add Bag Icon Before ‘Add To Cart’ button
-
i would like to place a shopping bag icon before the ‘Add to Cart’ button
Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
body .single_add_to_cart_button:before {
position: absolute;
inset-inline-start: 0;
content: "\f105";
font-family: "woodmart-font";
opacity: 1;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
background-color: #E84744;
transition: all .3s ease;
}
body .single_add_to_cart_button:after {
inset-inline-start: 20px;
}
body .single_add_to_cart_button.loading:before {
color: transparent;
}
body .single_add_to_cart_button {
padding-inline-start: 60px;
}
body .single_add_to_cart_button:hover:before {
background-color: red;
}
Best Regards.
i want icon add to cart text before like this
Attachments:
You must be
logged in to view attached files.
Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
body .single_add_to_cart_button:before {
position: absolute;
inset-inline-start: 0;
content: "\f07a";
font-family: "Font Awesome 5 Free";
opacity: 1;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all .3s ease;
}
Change the value as per your requirements to adjust the icon.
Best Regards.