Replace login button with icon

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!

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;

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.

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

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? 

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'

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

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.

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?

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.

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;
}

Thanks Tuanphan, that's a good compromise.