Changing the login/Account text to a svg icon

On 12/7/2021 at 6:58 PM, nw7063 said:

https://www.soulfruit.co.uk/blog

Add to Design > Custom CSS

/* center login icon on mobile */
.user-accounts-text-link {
    background-position: center !important;
}

Hi Guys,

Would you be able to make me a code too. I would like the login to look as the image below.

My Website is: www.bvanditstreetwear.com.au http://assets.stickpng.com/images/585e4bf3cb11b227491c339a.png 

Sory my website is 

banditstreetwear.com.au

On 1/17/2022 at 1:33 PM, Samuelb7227 said:

Sory my website is 

 

banditstreetwear.com.au

Add to Design > Custom CSS

span.unauth {
    background-image: url(http://assets.stickpng.com/images/585e4bf3cb11b227491c339a.png );
    color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

@tuanphan is there any chance you can give me some CSS to turn off the underline on hover when using an icon instead?

On 4/7/2022 at 7:10 PM, sarahcreates said:

@tuanphan is there any chance you can give me some CSS to turn off the underline on hover when using an icon instead?

What is site url? We can check easier

Hello, I'm trying to do something similar, I want to replace the current account icon with this one https://fonts.google.com/icons?selected=Material Icons Outlined%3Aperson_outline%3A

My website is https://www.cooliconlighting.com/

Can anyone help please?

Thanks!

On 4/19/2022 at 5:44 PM, ChloeCL said:

Hello, I'm trying to do something similar, I want to replace the current account icon with this one https://fonts.google.com/icons?selected=Material Icons Outlined%3Aperson_outline%3A

My website is https://www.cooliconlighting.com/

Can anyone help please?

Thanks!

Hi,

First, access font google icon >> You will see options to download it as svg or png. Download svg then name it: cart.svg

Next, upload it to your site

Next, add this to Design > Custom CSS

/* new icon */
.user-accounts-icon {
    background-image: url(https://www.cooliconlighting.com/s/cart.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.user-accounts-icon svg {
    visibility: hidden;
}

If it doesn't work, keep the code & let me know. We can check it again easier

I'll PM you for client privacy reasons

Hi!

Thank you everyone for your help.

These CSS codes work for replacing the 'Login' text with an icon. However, what is the CSS code to replace the 'Login' text with another text like 'Members Only'

Thank You!

https://disc-flute-m4xs.squarespace.com/home

59 minutes ago, florenza said:

However, what is the CSS code to replace the 'Login' text with another text like 'Members Only'

Add the following to Design > Custom CSS.

Header User Accounts Login Text Change.

Let us know how it goes.

7 hours ago, creedon said:

Add the following to Design > Custom CSS.

Header User Accounts Login Text Change.

Let us know how it goes.

Worked perfectly, thank you so much for the quick response!

Hello,

I changed the login text to an icon but now the position is right on the website but I'd like it centered on the mobile menu. 

Is it possible?

Thank you!

On 9/13/2022 at 7:45 PM, mmaxime2 said:

Hello,

I changed the login text to an icon but now the position is right on the website but I'd like it centered on the mobile menu. 

Is it possible?

Thank you!

 

Which code did you use?

On 9/17/2022 at 10:42 AM, tuanphan said:

Which code did you use?

.user-accounts-text-link {
    color: transparent !important;
    background-image: url(https://i.ibb.co/vVt7mVr/iconaccount.png);
    background-size: contain;
    background-repeat: no-repeat;
background-position: right;
}
.user-accounts-text-link span.unauth { visibility:hidden }

On 9/18/2022 at 5:29 PM, mmaxime2 said:

.user-accounts-text-link {
    color: transparent !important;
    background-image: url(https://i.ibb.co/vVt7mVr/iconaccount.png);
    background-size: contain;
    background-repeat: no-repeat;
background-position: right;
}
.user-accounts-text-link span.unauth { visibility:hidden }

Change your code to this

.user-accounts-text-link {
    color: transparent !important;
    background-image: url(https://i.ibb.co/vVt7mVr/iconaccount.png);
    background-size: contain;
    background-repeat: no-repeat;
background-position: right;
}
.user-accounts-text-link span.unauth { visibility:hidden }
@media screen and (max-width:991px) {
.user-accounts-text-link {
background-position: center;
}
}

3 hours ago, tuanphan said:

Change your code to this

.user-accounts-text-link {
    color: transparent !important;
    background-image: url(https://i.ibb.co/vVt7mVr/iconaccount.png);
    background-size: contain;
    background-repeat: no-repeat;
background-position: right;
}
.user-accounts-text-link span.unauth { visibility:hidden }
@media screen and (max-width:991px) {
.user-accounts-text-link {
background-position: center;
}
}

 

It worked perfectly! Thank you!

On 9/20/2022 at 11:31 AM, tuanphan said:

Change your code to this

.user-accounts-text-link {
    color: transparent !important;
    background-image: url(https://i.ibb.co/vVt7mVr/iconaccount.png);
    background-size: contain;
    background-repeat: no-repeat;
background-position: right;
}
.user-accounts-text-link span.unauth { visibility:hidden }
@media screen and (max-width:991px) {
.user-accounts-text-link {
background-position: center;
}
}

 

Hey there! I used the following code and it works in the "Custom CSS Preview". However, it doesn't display anything on my live website, also not in incognito mode. Do you have any clue why?

Here's the link to my website:

https://onetimesecret.com/secret/j55f4dbd4furuy2yvfq1fc3ljo1et2t

That's the Code I used:

/* Login text to icon */
.user-accounts-text-link {
    color: transparent !important;
    background-image: url(/s/account.svg);
    background-size: contain;
    background-repeat: no-repeat;
	background-position: right;
}
/* center login icon on mobile */
.user-accounts-text-link span.unauth { visibility:hidden }
@media screen and (max-width:991px) {
.user-accounts-text-link {
background-position: center;
  margin-top: 50px !important;
}
}

On 7/10/2023 at 4:19 PM, mastermaisu said:

Hey there! I used the following code and it works in the "Custom CSS Preview". However, it doesn't display anything on my live website, also not in incognito mode. Do you have any clue why?

Here's the link to my website:

https://onetimesecret.com/secret/j55f4dbd4furuy2yvfq1fc3ljo1et2t

That's the Code I used:

/* Login text to icon */
.user-accounts-text-link {
    color: transparent !important;
    background-image: url(/s/account.svg);
    background-size: contain;
    background-repeat: no-repeat;
	background-position: right;
}
/* center login icon on mobile */
.user-accounts-text-link span.unauth { visibility:hidden }
@media screen and (max-width:991px) {
.user-accounts-text-link {
background-position: center;
  margin-top: 50px !important;
}
}

 

Sometime upload files won't work on Trial Plan.

If you upgrade to paid plan + still have problems, let me know, we will check it again

@tuanphan is it possible to have the login icon next to the cart on mobile similar to the desktop view

my site is www.faceoflove.co

On 10/6/2023 at 5:53 AM, nahlah said:

@tuanphan is it possible to have the login icon next to the cart on mobile similar to the desktop view

 

my site is www.faceoflove.co

Use this CSS code

a.user-accounts-text-link {
    background-image: url(https://static1.squarespace.com/static/62db1f440fdb0b1fc368501f/t/651f1c08261405661fb91f5d/1696537608653/Untitled+design+%2845%29.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 28px;
}

On 10/7/2023 at 11:08 AM, tuanphan said:

Use this CSS code

a.user-accounts-text-link {
    background-image: url(https://static1.squarespace.com/static/62db1f440fdb0b1fc368501f/t/651f1c08261405661fb91f5d/1696537608653/Untitled+design+%2845%29.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 28px;
}

 

Hi @tuanphan, could you help me with this?

I would like to replace the 'login' text with this icon: <a href="https://www.flaticon.com/free-icons/user" title="user icons">User icons created by Freepik - Flaticon</a>

Also, once the text is changed to an icon, I would like to turn off the underline on hover for that icon.

URL: threadsonline.co.uk

Password: asdfghjkl

Thanks! 🙂 

On 3/1/2024 at 4:48 PM, threadsonline said:

Hi @tuanphan, could you help me with this?

I would like to replace the 'login' text with this icon: <a href="https://www.flaticon.com/free-icons/user" title="user icons">User icons created by Freepik - Flaticon</a>

Also, once the text is changed to an icon, I would like to turn off the underline on hover for that icon.

URL: threadsonline.co.uk

Password: asdfghjkl

Thanks! 🙂 

 

Hi @tuanphan,

I have been playing around with this code trying to replace the word 'login' with the attached icon. I paid for the premium account on Flaticon to download the icon as a SVG but I still can't get this to work. 

Maybe iIm not using the correct URL for the icon, I downloaded it as s SVG off Flaticon then right clicked > inspect and the copied the attached URL.

Please help!! 😞 Store: https://threadsonline.co.uk/ Password: asdfghjkl

I tried this code:

a.user-accounts-text-link {
    background-image: url(http://www.w3.org/2000/svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 28px;
}

On 3/3/2024 at 5:00 AM, threadsonline said:

Hi @tuanphan,

I have been playing around with this code trying to replace the word 'login' with the attached icon. I paid for the premium account on Flaticon to download the icon as a SVG but I still can't get this to work. 

Maybe iIm not using the correct URL for the icon, I downloaded it as s SVG off Flaticon then right clicked > inspect and the copied the attached URL.

Please help!! 😞 Store: https://threadsonline.co.uk/ Password: asdfghjkl

I tried this code:

a.user-accounts-text-link {
    background-image: url(http://www.w3.org/2000/svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 28px;
}

This is invalid url. You can send me image file, I can give you exact code

5 hours ago, tuanphan said:

This is invalid url. You can send me image file, I can give you exact code

Hey, I have attached the image and this is the link to it on Flaticon in case you need it: https://www.flaticon.com/free-icon/user_1077063?term=profile&page=1&position=6&origin=search&related_id=1077063