Jump to content

Replace login button with icon

Go to solution Solved by tuanphan,

Recommended Posts

  • 2 weeks later...
  • Replies 19
  • Views 4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
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!

user-symbol-of-thin-outline.png

Screen Shot 2021-03-14 at 5.39.02 PM.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
  • 7 months later...

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
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan 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? 

 

Link to comment
7 hours ago, tuanphan 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'

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Screen Shot 2021-11-29 at 15.40.33.png

IMG_6542.PNG

Link to comment
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.

Screen Shot 2021-11-29 at 15.40.33.png

IMG_6542.PNG

Hi,

I don't see icon on both desktop & mobile. Can you add it?

image.thumb.png.d13004d60aed6300d45ca513aa32d6ce.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;

image.thumb.png.73981af0faebda204a412c3c088f4806.png

To remove underline, use this CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Capture d’écran, le 2023-10-12 à 09.55.10.png

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

image.png.c2ef2b740d6243bed7601d2702a82702.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

image.png.c2ef2b740d6243bed7601d2702a82702.png

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?

Capture d’écran, le 2023-10-20 à 07.39.21.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.