Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change cart icon with bag icon - Crosby 7.1


francescalo
Go to solution Solved by humxahafeex,

Question

  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-inne

Add to Home > Design > Custom CSS /* Header cart icon color */ .header .header-actions-action--cart .icon { color: white; }  

Posted Images

21 answers to this question

Recommended Posts

  • 1

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 🙂

style-cart.PNG

Link to post
  • 1
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 🙂

Link to post
  • 0
Posted (edited)

Hi

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

Thanks

 

Edited by rosieames
Link to post
  • 0
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 🙂

Link to post
  • 0
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 🙂

style-cart.PNG

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.

Link to post
  • 0
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 🙂 

Link to post
  • 0
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>
Link to post
  • 0
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 🙂 

Link to post
  • 0
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?

Edited by Kaybot
Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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

Link to post
  • 0

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

Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...