Issue with shopping basket/bag icon in nav bar

I'm currently having an issue with my client's nav bar. Years ago when I set up their website, I must have added some custom css to display a shopping bag instead of a shopping cart in the top right of the nav bar. Now that there are multiple shopping cart/bag icons available to choose from on Squarespace I want to use a different default one from Squarespace. However when I select this and delete all the custom CSS from the custom CSS field, the old black bag icon still remains, so there are two bag icons. I've searched the Custom CSS fields, custom files folder, code injection fields, and page header code injection fields and cannot find where this icon is coming from. 

Any help would be great appreciated, thank you in advance.

Can you share the website URL?

1 minute ago, Ziggy said:

Can you share the website URL?

Hi Ziggy, URL is https://www.giveadamngift.com/ thanks 🙂

There is currently the old shopping bag in the nav bar while I figure out how I can remove it before activating the new one.

Somewhere in your CSS you have this:

.fa-shopping-bag:before {
    content: "\f290";
}

15 minutes ago, Ziggy said:

Somewhere in your CSS you have this:

.fa-shopping-bag:before {
    content: "\f290";
}

Hi Ziggy, thanks for responding to this so quickly.

Is there a way of locating where this piece of CSS is? Have searched all custom fields and the only thing I can find is:

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

but when I delete this the black bag icon remains but shrinks in size. I can't locate the content: "content:f290"; part anywhere..

Combing through the CSS and code injection is really the only way I know of locating it.

2 hours ago, iamdavehart said:

you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably

<script>
  $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>");
</script>

It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code.

Go to settings > advanced > code injection

Amazing, thank you so much Dave! It was driving me bonkers trying to find where it was, but if it was a font that will be why. Managed to get it sorted now, thanks again for your help 🙂

Another question the topic of this website too if anyone can help - in the mobile version of the nav bad/menu the user icon appears giant at the bottom of the menu, is it possible to move this up alongside the shopping cart/bag icon like in previous versions of Squarespace?

On 11/30/2022 at 11:58 PM, sarah_cowan said:

Another question the topic of this website too if anyone can help - in the mobile version of the nav bad/menu the user icon appears giant at the bottom of the menu, is it possible to move this up alongside the shopping cart/bag icon like in previous versions of Squarespace?

 

Add this to Design > Custom CSS

/* resize user icon on mobile */
.header-menu-nav-folder-content .user-accounts-text-link {
    background-position: center;
    background-size: 40px;
}

1 hour ago, tuanphan said:

Add this to Design > Custom CSS

/* resize user icon on mobile */
.header-menu-nav-folder-content .user-accounts-text-link {
    background-position: center;
    background-size: 40px;
}

 

Thanks so much Tuanphan! 🙂 That's a much better size, but is there a way to move it so it sits alongside the shopping back in the top right?

On 12/2/2022 at 6:39 PM, sarah_cowan said:

Thanks so much Tuanphan! 🙂 That's a much better size, but is there a way to move it so it sits alongside the shopping back in the top right?

Use this CSS

@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
    position: relative;
    left: -10px;
}
}

On 12/3/2022 at 2:04 PM, tuanphan said:

Use this CSS

@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
    position: relative;
    left: -10px;
}
}

 

Perfect, thanks again Tuanphan 🙂