Change login text to an icon

Hello, I was wondering if there is any code that is able to change the login text into a custom icon made from adobe illustrator, I would rather change it to a custom icon compared to one from a free site.

Thank you!

https://refreshedmemories.squarespace.com/config/pages

Password: Butler

@Web_Solutions @Ziggy @tuanphan 

do any of you guys know how I can accomplish this???

Try this but replace the SVG with your image

https://forum.squarespace.com/topic/169881-changing-the-loginaccount-text-to-a-svg-icon/?do=findComment&comment=396818

Ok!

Recently I solved for a member on forum, this is code I used (I used Google Fonts Icon)

Website Tools (under Not Linked) > Code Injection > Footer

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<style>
span.unauth {
    font-size: 0
}

span.unauth:before {
    content: "\e7fd";
    font-family: 'Material Symbols Outlined';
    font-size: 30px;
    position: relative;
    left: -2px;
    top: 10px
}
</style>

@tuanphan Wow! thank you! is there any way for it to just say Login instead of the icon for mobile, I just want the Icon there on desktop. I'm not sure if media screens work on code injection...

Thank you!

https://refreshedmemories.squarespace.com

password: RMWEB

On 12/27/2023 at 1:09 AM, saubuchon24 said:

@tuanphan Wow! thank you! is there any way for it to just say Login instead of the icon for mobile, I just want the Icon there on desktop. I'm not sure if media screens work on code injection...

Thank you!

https://refreshedmemories.squarespace.com

password: RMWEB

Remove above code & use this new code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<style>
.header-display-desktop span.unauth {
    font-size: 0
}
.header-display-desktop span.unauth:before {
    content: "\e7fd";
    font-family: 'Material Symbols Outlined';
    font-size: 30px;
    position: relative;
    left: -2px;
    top: 10px
}
</style>

tried multiple codes to change "Login" text into icons, .png.jpg. - doesnt work. 😞

41 minutes ago, Gray_tan said:

tried multiple codes to change "Login" text into icons, .png.jpg. - doesnt work

@Gray_tan Please provide more details. It will help us if you include:

• a link to the icon you are trying to use
• a link to your website
• a link to the code you have tried
• a description or screenshot of what happens when you use the code.

The more you tell us, the easier for us to help 🙂. 

@paul2009

1. https://static1.squarespace.com/static/65bc845aeef21c331795b4d2/t/65d47059624f260b5829e01c/1708421209869/Untitled+design.jpg

2. https://www.theroadofmarriage-sg.com/

3. /* Hide the login text */
.header-actions-action--account > a > span {
    visibility: hidden;
}

/* Insert background image as icon */
.header-actions-action--account > a:before {
    content: '';
    background-image: url('your_icon_url_here'); /* Replace 'your_icon_url_here' with the URL of your icon image */
    display: inline-block;
    width: 30px; /* Adjust width as needed */
    height: 30px; /* Adjust height as needed */
    background-size: cover;
    vertical-align: middle; /* Adjust vertical alignment as needed */
}

4. nothing happens when i use above code. I need the "login" text to change into icon

13 minutes ago, Gray_tan said:

nothing happens when i use above code. I need the "login" text to change into icon

There are a few issues here:

1. Squarespace updated the header and changed the 'class' for the desktop account link from .header-actions-action--account to .user-accounts-link, so this must be changed within your CSS snippet.
2. In your code there's a line that includes "your_icon_url_here" where you'll need to substitute the url of your image.
3. Your image is a JPEG with a white background so you'll probably want to upload a PNG alternative that has a transparent background.

Once you've made those changes, paste it into the Custom CSS panel and it should work. That said, I also recommend changing visibility: hidden to display:none otherwise this missing "login" text will still consume space in the header 🙂.

For example:

/* Hide the login text */
.user-accounts-link > a > span {
  display:none;
}

/* Insert background image as icon */
.user-accounts-link > a:before {
    content: '';
    background-image: url('//static1.squarespace.com/static/65bc845aeef21c331795b4d2/t/65d47059624f260b5829e01c/1708421209869/Untitled+design.jpg'); 
    display: inline-block;
    width: 30px; /* Adjust width as needed */
    height: 30px; /* Adjust height as needed */
    background-size: cover;
    vertical-align: middle; /* Adjust vertical alignment as needed */
}

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 cheers sir, it works. Truly appreciate your help 😁 my deepest apologies in adding on a few other requests:

1. mobile view: isit possible to add the "shopping cart" icon on the top right hand corner of my webpage?

2.mobile view: can i increase the "shopping cart" icon size purely on mobile only?

code used:

div.header-actions-action--cart>a {
    position: fixed;
    bottom: 70px;
    right: 20px;
}
/* Apply the rule for screens smaller than or equal to 768px (typical tablet portrait size) */
@media (max-width: 768px) {
    div.header-actions-action--cart>a {
    }

9 minutes ago, Gray_tan said:

my deepest apologies in adding on a few other requests:

I recommend you start a new thread for those requests.