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

gthegreat
Shopify Partner
60 1 13

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

gthegreat_0-1632355892227.png

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

 

 I'm trying to remove this :

gthegreat_1-1632356141006.png

And Change it to this :

gthegreat_2-1632356300305.png

The font awesome code is : <i class="fas fa-shopping-cart"></i> but it won't display.

I APPRECIATE YOUR TIME/EFFORT

 

Replies 16 (16)

dmwwebartisan
Shopify Partner
12280 2546 3694

@gthegreat 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
gthegreat
Shopify Partner
60 1 13
gthegreat
Shopify Partner
60 1 13
dmwwebartisan
Shopify Partner
12280 2546 3694

@gthegreat 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
gthegreat
Shopify Partner
60 1 13

@dmwwebartisan 

Yessir I have attached them below

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@gthegreat 

Please provided SVG icon file .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
gthegreat
Shopify Partner
60 1 13

@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:

gthegreat_0-1632539184429.png

 

Thanks

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@gthegreat 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
gthegreat
Shopify Partner
60 1 13

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.

 

😕

This is the code from each file:

Icon Cart empty.liquid 

<svg class="icon icon-cart-empty" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
  <path d="m15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.78-11.61zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1 -9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z" fill="currentColor" fill-rule="evenodd"/>
</svg>
 
Icon Cart.liquid 
<svg class="icon icon-cart" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
  <path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"/>
</svg>
 

Thanks 

dmwwebartisan
Shopify Partner
12280 2546 3694

@gthegreat 

ok i will check your file and inform to you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

@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 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
gthegreat
Shopify Partner
60 1 13

@dmwwebartisan 

I uploaded it and it looks like this :

gthegreat_1-1632617409440.png

Do you know how to get this ?:

gthegreat_2-1632617486713.png

THANK U FOR YOUR PATIENCE 

its the cart icon from font awesome :

<i class="fas fa-shopping-cart"></i>

 

gthegreat
Shopify Partner
60 1 13

@dmwwebartisan 

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

 

 

yass9898
Tourist
4 0 1

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

Sprinklerfish
Shopify Partner
1 0 2

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

 

 

<svg class="icon icon-cart" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/>
</svg>

 

 

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 

user12345678
Visitor
1 0 0

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.

 

<img src="{{ 'cart.png' | asset_url }}" style="height: 36px"></span>

Hope this helps!