How can I change the Cart Icon on the Dawn 2.0 theme to a font awesome icon?

Hello, I found where the original cart icon is located for the dawn 2.0 theme it looks like so:

Therefore when I replace this code with the font awesome code it doesn’t work.

I’m trying to remove this :

And Change it to this :

The font awesome code is : but it won’t display.

I APPRECIATE YOUR TIME/EFFORT

1 Like

@gthegreat

Please share store URL!

Thanks!

https://424iog813wcfuvcu-58572865730.shopifypreview.com

@dmwwebartisan

https://424iog813wcfuvcu-58572865730.shopifypreview.com

Password: plswork

1 Like

@gthegreat

Please add svg code snippets/ icon-cart.liquid file and snippets/icon-cart-empty.liquid file.

Thanks!

1 Like

@dmwwebartisan

Yessir I have attached them below

@gthegreat

Please provided SVG icon file .

Thanks!

@dmwwebartisan

I attached the two files and in them, there is the SVG tag, there isn’t an actual SVG file. Here is a screenshot:

Thanks

@gthegreat

file contain old SVG icon code Please prvided NEW svg icon file

Thanks!

Hello ,

@dmwwebartisan

I’m confused there is not a new SVG file , only the ones I already sent you and showed a screenshot of. If there are new icon files I don’t have them I sent you all that I have.

:confused:

This is the code from each file:

Icon Cart empty.liquid

Icon Cart.liquid

Thanks

@gthegreat

ok i will check your file and inform to you.

Thanks!

@gthegreat

Please add the following code at the bottom of your assets/base.css file.

.header__icon, .header__icon--cart .icon {
    height: 2.2rem !important;
    width: 4.2rem !important;
}

And upload under file your snippets please check zip file

1 Like

@dmwwebartisan

I uploaded it and it looks like this :

Do you know how to get this ?:

THANK U FOR YOUR PATIENCE

its the cart icon from font awesome :

@dmwwebartisan

Thank you for your time do you perhaps… have any more tips on how to get the icon I’m referring to?

hi friend, do you know how to change cart icon style on dawn theme?

@gthegreat This exact code block worked for us just now on the Dawn 2.0 theme:


Note that you will need to replace the code in both icon-cart.liquid and icon-cart-empty.liquid for this to work. Otherwise the bag will still be there on one or the other.

We also had to modify the CSS to make the icon the same size as the other two. Not sure why because we’re not great with SVGs, but it worked at least. You can see the result on our site at www.sprinklerfish.com

2 Likes

It’s also possible to upload a .png image under assets then paste something like the following under under icon-cart-empty.liquid and icon-cart-empty.liquid.

Hope this helps!