How to change cart icon with bag icon - Crosby 7.1

How can I change the classic cart icon with the bag one in Crosby 7.1?

there is a css I can add to do this?

Thank you

THANK YOU SO MUCH!!!!

it works perfectly! You are the best!

Just now, francescalo said:

THANK YOU SO MUCH!!!!

it works perfectly! You are the best!

Hi , Glad It Helped 🙂 Please do Mark it as Solved so It will help others as well 🙂

Can you do something similar with this, but instead of targeting the cart icon, it targets the Link icon in social links in 7.1? @humxahafeex

Hi

Thanks for this code - it works perfectly but my bag icon is coming out black - any idea how to make it white?

Thanks

18 hours ago, rosieames said:

Hi

Thanks for this code - it works perfectly but my bag icon is coming out black - any idea how to make it white?

Thanks

 

Glad it worked , Please do share your website link so I can provide you with the code 🙂

On 3/17/2020 at 2:43 PM, humxahafeex said:

Hi @francescalo  you can get it done in just 2 Steps  , easily Let me share a code with you  🙂

Step 1 : Copy & Paste the follwoing code in HOME>DESIGN>CUSTOM CSS section.

.Cart-inner>.icon{
  display:none;
}

Step 2:  Copy & Paste the follwoing code in SETTINGS>ADVANCE>CODE INJECTION  and paste in FOOTER   section.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>
  $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>");
</script>

It will do the Job 🙂 Screenshot is attahced  on how it will look like 🙂 If it answers the question don't forget to mark it as solved 🙂

Hey!! Thank you for the code. How would I go about changing the icon to another of the font awesome icons? I tried changing the class to fas fa-cash-register and it is not showing up anything now.

14 hours ago, Kaybot said:

Hey!! Thank you for the code. How would I go about changing the icon to another of the font awesome icons? I tried changing the class to fas fa-cash-register and it is not showing up anything now.

Hi , Will you please show your code , where you made edits so I can look in to it 🙂 

On 7/15/2020 at 3:08 AM, humxahafeex said:

Hi , Will you please show your code , where you made edits so I can look in to it 🙂 

Ah sorry didnt see this. Thank you so much for the help though. I followed the instructions you gave above but changed just the icon name to the one i liked on font awesome and it is not showing anything.

Website is jackclub.shop and the password is "password" if you would like to look at the site

 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>
  $(".Cart-inner").append("<i class='fas fa-cash-register' aria-hidden='true'></i>");
</script>

11 hours ago, Kaybot said:

Ah sorry didnt see this. Thank you so much for the help though. I followed the instructions you gave above but changed just the icon name to the one i liked on font awesome and it is not showing anything.

Website is jackclub.shop and the password is "password" if you would like to look at the site

 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>
  $(".Cart-inner").append("<i class='fas fa-cash-register' aria-hidden='true'></i>");
</script>

Hi , I see you are using font awesome 5 verison , meanwhile code provided here was for fontawesome 3 , Please do the following:

Replace first line of code with the following line :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/fontawesome.min.css" integrity="sha512-8jdwayz5n8F2cnW26l9vpV6+yGOcRAqz6HTu+DQ3FtVIAts2gTdlFZOGpYhvBMXkWEgxPN3Y22UWyZXuDowNLA==" crossorigin="anonymous" />

It will gonna fix the issue for you 🙂 

On 7/17/2020 at 6:52 AM, humxahafeex said:

Hi , I see you are using font awesome 5 verison , meanwhile code provided here was for fontawesome 3 , Please do the following:

Replace first line of code with the following line :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/fontawesome.min.css" integrity="sha512-8jdwayz5n8F2cnW26l9vpV6+yGOcRAqz6HTu+DQ3FtVIAts2gTdlFZOGpYhvBMXkWEgxPN3Y22UWyZXuDowNLA==" crossorigin="anonymous" />

It will gonna fix the issue for you 🙂 

Thanks for looking! Now I am just getting a square in its place. Do you know why?

On 8/13/2020 at 12:11 AM, SAINT-KIA said:

@humxahafeex Hi good afternoon I have a question I want to count words or limit the words in product form can you please help me do that please? I will really appreciate. my version is 7.1 

If you share link to a product, we can check easier.

On 6/6/2020 at 6:23 AM, humxahafeex said:

Glad it worked , Please do share your website link so I can provide you with the code 🙂

Looking back at this. Code worked but the bag is black and not white. Help please

13 hours ago, Lauri said:

Looking back at this. Code worked but the bag is black and not white. Help please

Can you share site url? We can help easier.

2 hours ago, tuanphan said:

Can you share site url? We can help easier.

https://mackerel-collie-9dwr.squarespace.com/config/

Sending password to a private message 

5 hours ago, Lauri said:

https://mackerel-collie-9dwr.squarespace.com/config/

Sending password to a private message 

Add to Home > Design > Custom CSS

/* Header cart icon color */
.header .header-actions-action--cart .icon {
    color: white;
}

@tuanphan..... Thank you so very much for everything. You are appreciated.

On 9/15/2020 at 5:23 AM, Lauri said:

@tuanphan..... Thank you so very much for everything. You are appreciated.

Can you share password again? 

(There was a storm here, can't check :()

Hello, this worked perfectly! Thank you so much! However I was wondering how I could change the size of the shopping bag to make it slightly bigger. Thank you again :)

Also it seems the shopping bag only shows up on my shopping bag cart, while on every other page i only see blank space. Please help

On 10/14/2020 at 5:15 PM, nparejaz said:

Hello, this worked perfectly! Thank you so much! However I was wondering how I could change the size of the shopping bag to make it slightly bigger. Thank you again :)

Add to Home > Design > Custom CSS

i.fa.fa-shopping-bag {
    font-size: 20px;
}

On 10/14/2020 at 5:29 PM, nparejaz said:

Also it seems the shopping bag only shows up on my shopping bag cart, while on every other page i only see blank space. Please help

See fine here?

Hi Tuanphan, 

I'd like to replace the shopping card icon with a custom icon.

I uploaded the .png file in custom css code, but not sure what are the next steps.

side url: https://hen-glockenspiel-56g6.squarespace.com (I can send password in private message).

custom png file 

Thank you in advance for your support.

greg

On 2/23/2021 at 1:16 AM, Grzegorz_Jarzy said:

Hi Tuanphan, 

I'd like to replace the shopping card icon with a custom icon.

I uploaded the .png file in custom css code, but not sure what are the next steps.

side url: https://hen-glockenspiel-56g6.squarespace.com (I can send password in private message).

custom png file 

Thank you in advance for your support.

greg

Hi. It looks like you solved with this code?

header#header [href="/cart"] {
    background-image: url(https://static1.squarespace.com/static/5fbae1f6325d9d26d9276819/t/6036e4b4543b8e3ce26c2633/1614210229105/Koszyk2.pnghttps://static1.squarespace.com/static/5fbae1f6325d9d26d9276819/t/6036e4b4543b8e3ce26c2633/1614210229105/Koszyk2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

header#header [href="/cart"] svg {
    display: none
}

Hi, 

I would like this cart icon https://www.shopifyoudare.com from this site on https://www.tribeandsol.com how can I achieve this?