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.

Hi guys! I replaced the login button for an icon on my client's website...... but!

I would like: (1) to sit the icon just aside the "calendar" button and (2) not have any underline while hovering the icon. 

Website: snail-ray-daxz.squarespace.com
PW: freelance

On 10/9/2023 at 9:53 AM, abbiericher said:

Hi guys! I replaced the login button for an icon on my client's website...... but!

I would like: (1) to sit the icon just aside the "calendar" button and (2) not have any underline while hovering the icon. 

Website: snail-ray-daxz.squarespace.com
PW: freelance

You can add background-position: right;

To remove underline, use this CSS

a.user-accounts-text-link:after, .user-accounts-link:after {
    visibility: hidden;
    opacity: 0 !important;
}

Awesome! It works perfectly!

And do you happen to know how I can place the login icon in the mobile header, just aside the mobile navigation (not in the mobile navigation)?

Same login info and password.

On 10/12/2023 at 8:56 PM, abbiericher said:

Awesome! It works perfectly!

And do you happen to know how I can place the login icon in the mobile header, just aside the mobile navigation (not in the mobile navigation)?

Same login info and password.

Use this CSS code

@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header .customerAccountLoginDesktop {
    display: flex !important;
}
.header-title-nav-wrapper {
    flex: 1 0 50% !important;
}
}

On 10/15/2023 at 1:58 AM, tuanphan said:

Use this CSS code

@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header .customerAccountLoginDesktop {
    display: flex !important;
}
.header-title-nav-wrapper {
    flex: 1 0 50% !important;
}
}

Thanks @tuanphan ! Would you happen to know why I have to login icon now? One exactly where it was at the beginner in the hamburger menu and the other one where you helped me place it.

Can I just have the one aside the hamburger menu and not in it?

To hide login icon inside burger menu overlay (above button), use this CSS code

/* hide burger menu login icon */
.header-menu .user-accounts-link {
    display: none !important;
}

On 10/23/2023 at 4:11 AM, tuanphan said:

To hide login icon inside burger menu overlay (above button), use this CSS code

/* hide burger menu login icon */
.header-menu .user-accounts-link {
    display: none !important;
}

 

Awesome! Thanks a lot!