boldhumansco Posted March 14, 2021 Share Posted March 14, 2021 Site URL: https://boldhumansco.com/ Hi! I want to replace the login button, which is currently just "Login", with an icon. The icon I want is attached below. A screenshot of what I have right now is below. I want the icon to be the same size as the shopping cart icon as well. The website is https://www.boldhumansco.com/, password is baldisbold. Any help is appreciated, thanks so much! Link to comment
Solution tuanphan Posted March 23, 2021 Solution Share Posted March 23, 2021 On 3/15/2021 at 4:39 AM, boldhumansco said: Site URL: https://boldhumansco.com/ Hi! I want to replace the login button, which is currently just "Login", with an icon. The icon I want is attached below. A screenshot of what I have right now is below. I want the icon to be the same size as the shopping cart icon as well. The website is https://www.boldhumansco.com/, password is baldisbold. Any help is appreciated, thanks so much! Hi. Add to Design > Custom CSS. REplace with your icon url /* Login text to icon */ .user-accounts-text-link { color: transparent !important; background-image: url(https://cdn.pixabay.com/photo/2021/03/10/10/51/cherry-blossom-6084249__340.jpg); background-size: contain; background-repeat: no-repeat; } 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
boldhumansco Posted March 24, 2021 Author Share Posted March 24, 2021 11 hours ago, tuanphan said: Hi. Add to Design > Custom CSS. REplace with your icon url /* Login text to icon */ .user-accounts-text-link { color: transparent !important; background-image: url(https://cdn.pixabay.com/photo/2021/03/10/10/51/cherry-blossom-6084249__340.jpg); background-size: contain; background-repeat: no-repeat; } It worked perfectly! Thanks so much! To resize, I added these two lines: width: 19px; height: 19px; Link to comment
TomMesquitta Posted November 23, 2021 Share Posted November 23, 2021 Hi, I'd like to do the same thing and I have designed my own login icon to link to. How do I host my icon within Squarespace in order to obtain the URL to replace above? I have uploaded my icon as an image on a blank non linked page, but I can't seem to find its image location URL within Squarespace. Thanks, Tom. Link to comment
tuanphan Posted November 26, 2021 Share Posted November 26, 2021 On 11/23/2021 at 4:17 PM, TomMesquitta said: Hi, I'd like to do the same thing and I have designed my own login icon to link to. How do I host my icon within Squarespace in order to obtain the URL to replace above? I have uploaded my icon as an image on a blank non linked page, but I can't seem to find its image location URL within Squarespace. Thanks, Tom. Let’s say your domain is https://beaverhero.com. The uploaded file is abc.jpg The image url will be: https://beaverhero.com/s/abc.jpg 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
TomMesquitta Posted November 26, 2021 Share Posted November 26, 2021 4 hours ago, tuanphan said: Let’s say your domain is https://beaverhero.com. The uploaded file is abc.jpg The image url will be: https://beaverhero.com/s/abc.jpg Thanks Tuanphan that did the trick! Is there a way to force the login icon to show next to the cart icon when in mobile view? If not and it has to remain part of the burger menu (excuse my terminology) is there a way to just show it as text here? Link to comment
TomMesquitta Posted November 26, 2021 Share Posted November 26, 2021 7 hours ago, tuanphan said: Let’s say your domain is https://beaverhero.com. The uploaded file is abc.jpg The image url will be: https://beaverhero.com/s/abc.jpg Thanks Tuanphan that did the trick! Is there a way to force the login icon to show next to the cart icon when in mobile view? If not and it has to remain part of the burger menu (excuse my terminology) is there a way to just show it as text here? *update* my client wanted the domain to link back to her old temporary site for the time being so you will have to view my site at the built in URL: https://disc-snail-sk6j.squarespace.com Pass 'Fevroniapass' Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 On 11/26/2021 at 11:20 PM, TomMesquitta said: Thanks Tuanphan that did the trick! Is there a way to force the login icon to show next to the cart icon when in mobile view? If not and it has to remain part of the burger menu (excuse my terminology) is there a way to just show it as text here? *update* my client wanted the domain to link back to her old temporary site for the time being so you will have to view my site at the built in URL: https://disc-snail-sk6j.squarespace.com Pass 'Fevroniapass' It looks like you removed login text? I don't see it in both desktop and mobile 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
TomMesquitta Posted November 29, 2021 Share Posted November 29, 2021 Hi Tuanphan, Sorry perhaps I should rephrase. I'm happy with the login icon when viewed on desktop. When viewed on mobile the login icon appears bottom left. Is there a way to: A) force it to sit next to the cart icon like in the desktop view? or B) change the icon back so it just says 'login' – but only in mobile view (I'm happy with desktop). Thanks, Tom. Link to comment
tuanphan Posted November 30, 2021 Share Posted November 30, 2021 17 hours ago, TomMesquitta said: Hi Tuanphan, Sorry perhaps I should rephrase. I'm happy with the login icon when viewed on desktop. When viewed on mobile the login icon appears bottom left. Is there a way to: A) force it to sit next to the cart icon like in the desktop view? or B) change the icon back so it just says 'login' – but only in mobile view (I'm happy with desktop). Thanks, Tom. Hi, I don't see icon on both desktop & mobile. Can you add it? 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
TomMesquitta Posted November 30, 2021 Share Posted November 30, 2021 Sorry Tuanphan. When changing from 'fevronia.net' back to the built in Squarespace domain, I didn't update the domain in the CSS. That has been done now so the site should display as per my screenshots above. Thanks, Tom. Link to comment
tuanphan Posted December 1, 2021 Share Posted December 1, 2021 23 hours ago, TomMesquitta said: Sorry Tuanphan. When changing from 'fevronia.net' back to the built in Squarespace domain, I didn't update the domain in the CSS. That has been done now so the site should display as per my screenshots above. Thanks, Tom. How about center icon on mobile? To center icon on mobile, add this CSS a.user-accounts-text-link.header-nav-item { margin-left: auto; margin-right: auto; } 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
TomMesquitta Posted December 2, 2021 Share Posted December 2, 2021 Thanks Tuanphan, that's a good compromise. 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