sarah_cowan Posted November 30, 2022 Share Posted November 30, 2022 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. Link to comment
Ziggy Posted November 30, 2022 Share Posted November 30, 2022 Can you share the website URL? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
sarah_cowan Posted November 30, 2022 Author Share Posted November 30, 2022 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. Link to comment
Ziggy Posted November 30, 2022 Share Posted November 30, 2022 Somewhere in your CSS you have this: .fa-shopping-bag:before { content: "\f290"; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
sarah_cowan Posted November 30, 2022 Author Share Posted November 30, 2022 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.. Link to comment
Ziggy Posted November 30, 2022 Share Posted November 30, 2022 Combing through the CSS and code injection is really the only way I know of locating it. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Solution iamdavehart Posted November 30, 2022 Solution Share Posted November 30, 2022 (edited) 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 Edited November 30, 2022 by iamdavehart sarah_cowan 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
sarah_cowan Posted November 30, 2022 Author Share Posted November 30, 2022 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 🙂 Link to comment
sarah_cowan Posted November 30, 2022 Author Share Posted November 30, 2022 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? Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarah_cowan Posted December 2, 2022 Author Share Posted December 2, 2022 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? Link to comment
tuanphan Posted December 3, 2022 Share Posted December 3, 2022 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarah_cowan Posted December 5, 2022 Author Share Posted December 5, 2022 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 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment