How can I make my cart icons bigger and allign the cart icon to the Add to cart text in the button

[INKLY]

Hi I would like to change the cart icon size both top right and inside the add to cart button. I tried modifying some CSS code but it doesn't; seem to work. Does anyone have a solution to this problem? Thank you very much for your help!

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=151132897545

[Moeed]

Hey @INKLY 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.product-form__submit svg.bi.bi-cart {
    top: 3px !important;
    position: relative;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the base.css file.

.product-form__buttons .icon-cart__container {
    vertical-align: middle;
}
.product-form__buttons .icon-cart__container svg {
    width: 25px;
    height: 25px;
}
.header__icon, .header__icon--cart .icon {
    height: 5.4rem !important;
    width: 5.4rem !important;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[INKLY]

@AnneLuo Thank you so much !

[Vinsinfo · Accepted solution]

@INKLY Please follow the below steps to change the cart icon size for both top right (in header) and inside the add to cart button. Let me know whether it is helpful for you.

1. Go to "Online stores" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search "base.css" file and paste below code at the bottom of the file like in the below attached screenshot.

NOTE: You can modify the values of the width and height for both icons as per your need.

.product-form__buttons .icon-cart__container {
    vertical-align: middle !important;
    display: inline-block !important;
}
.product-form__buttons .icon-cart__container svg {
    width: 22px !important;
    height: 22px !important;
}
header .header__icons .header__icon--cart svg {
    width: 35px !important;
    height: 35px !important;
}

Final result will be like below image. For you information, you can see the header cart icon in the website differs from the screenshot you attached, please reach out to me if any other help is needed.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[INKLY]

@Vinsinfo Thank you this works on desktop but on mobile it looks like this: 

[Vinsinfo]

@INKLY Try changing the width and height values from 35px to 40px for the element header .header__icons .header__icon--cart svg like below. Please let me know whether it works.

header .header__icons .header__icon--cart svg {
    width: 40px !important;
    height: 40px !important;
}

[INKLY]

@Vinsinfo When I 'customise' my website from shopify I can see the cart icon even on the mobile version. But when I publish the changes and go on my phone to see if it works. I still see the old default dawn theme cart icon.